[js] Drag & Drop: Drop werkt niet, event weigert.

[cyberstalker]

Ik heb in javascript een heel simpel drag & drop dingetje gemaakt. De bedoeling is dat er een aantal plaatjes zijn waar je op kunt klikken, die schuiven dan met de cursor mee, en kunnen daarna in twee boxen worden gedumpt.

De twee boxen hebben een id van 'voorkant' en 'achterkant'. Wanneer je daarin klikt met een plaatje, moet het plaatje daar blijven hangen. Het aanklikken van plaatjes werkt, echter plaatjes in de boxen droppen werkt niet. De functie wordt niet eens aangeroepen.

JavaScript:

function startDrag(event)
{
    var link        = event.target;
    var voorkant    = document.getElementById('voorkant');
    var achterkant  = document.getElementById('achterkant');
    var imgSrc      = link.getAttribute('src');
    
    // make a copy of the image for dragging around
    image = document.createElement('img');
    image.setAttribute('src', imgSrc);
    document.body.appendChild(image);
    
    // make the browser hand us the coordinates on mouseMove and prepare dropping
    document.addEventListener('mousemove', mouseMove, false);
    voorkant.addEventListener('click', dropImg, false);
    achterkant.addEventListener('click', dropImg, false);
}

function mouseMove(event)
{
    var imgX = event.clientX + 1;   // add some pixels otherwise clicks will be catched by image
    var imgY = event.clientY + 1;   // do i need to explain this one too?

    image.setAttribute('style', 'position: absolute; left: '+imgX+'px; top: '+imgY+'px;');
}

function dropImg(event)
{
    alert('Dropping image!');
    
    var link        = event.target;
    var voorkant    = document.getElementById('voorkant');
    var achterkant  = document.getElementById('achterkant');
    var offsetX     = event.offsetX;
    var offsetY     = event.offsetY;

    link.appendChild(image);
    image.setAttribute('style', 'position: absolute; left: '+offsetX+'px; top: '+offsetY+'px;');
    
    voorkant.removeEventListener('click');
    achterkant.removeEventListener('click');
    document.removeEventListener('mousemove');
}

Om te testen heb ik nu een alert helemaal bovenaan de functie dropImg gezet. Deze krijg ik niet te zien. Ik krijg echter ook geen javascript fouten.

[ Voor 4% gewijzigd door cyberstalker op 08-08-2006 23:39 ]

[André]

Het is logisch dat het niet werkt omdat de mouseup van de image alleen aan zijn parents wordt doorgegeven en dus niet aan de boxen. Je zult een soort collision detection moet maken die checked boven welke box je hangt met je image.

[cyberstalker]

André schreef op dinsdag 08 augustus 2006 @ 23:16:
Het is logisch dat het niet werkt omdat de mouseup van de image alleen aan zijn parents wordt doorgegeven en dus niet aan de boxen. Je zult een soort collision detection moet maken die checked boven welke box je hangt met je image.

Zoals je ziet gebruik ik geen mouseup, maar een click event. Het is dus geen echte drag&drop, maar meer een click&click.

De click in de boxen is dus een totaal ander event, welke vanuit de functie startDrag aan de boxen wordt gekoppeld (zie code).

edit: startDrag wordt dus ook aangeroepen vanaf een click event.

[ Voor 5% gewijzigd door cyberstalker op 08-08-2006 23:19 ]

[--MeAngry--]

Ik ben ooit ook eens met zoiets begonnen ja, maar ik liep tegen hetzelfde probleem aan.
Uiteindelijk heb ik het zo gemaakt dat het te draggen object niet meesleept maar dat er zgn 'ghosts' verschijnen in de boxes die het te draggen object vangen.
Ik zal zo eens kijken of ik het online kan zetten.

cyberstalker schreef op dinsdag 08 augustus 2006 @ 23:18:
[...]

Zoals je ziet gebruik ik geen mouseup, maar een click event. Het is dus geen echte drag&drop, maar meer een click&click.

De click in de boxen is dus een totaal ander event, welke vanuit de functie startDrag aan de boxen wordt gekoppeld (zie code).

edit: startDrag wordt dus ook aangeroepen vanaf een click event.

Ja, maar dan zit je nog steeds met dat plaatje onder je muis waar je in feite op klikt. Je klikt niet op de box eronder, maar weer op het plaatje wat je aan het meedraggen bent.

[ Voor 50% gewijzigd door --MeAngry-- op 08-08-2006 23:20 ]

[wizzkizz]

--MeAngry-- schreef op dinsdag 08 augustus 2006 @ 23:19:
Ja, maar dan zit je nog steeds met dat plaatje onder je muis waar je in feite op klikt. Je klikt niet op de box eronder, maar weer op het plaatje wat je aan het meedraggen bent.

Dan laat je het plaatje net aan de rechterkant (of onderkant) van de cursor meezweven, zodat een click niet op het plaatje terecht komt, maar in de gewenste box.

[cyberstalker]

wizzkizz schreef op dinsdag 08 augustus 2006 @ 23:37:
[...]

Dan laat je het plaatje net aan de rechterkant (of onderkant) van de cursor meezweven, zodat een click niet op het plaatje terecht komt, maar in de gewenste box.

Dat had ik net zelf ook al bedacht, en dat werkt (zie edit TS) .

Wat echter nu misgaat is dat de plaatjes niet op de juiste plaats in de box terechtkomen. Ze komen altijd tegen de bovenkant aan, met de linkerkant precies in het midden van de box te staan. Is dit een probleem met offsetX/Y of doe ik hier zelf iets fout?
Ook opgelost .