Drag and Drop works only in one direction

Question

I have a problem with the Drag and Drop API in Javascript. I have two areas one called widgets and another called selection. Now I want to be able to drag and drop the widgets from one area. This already works but only when i drag a widget to the selection panel.

When I want to drag it back to the widgets panel. It does not work. According to my debugging the dragstart event is never called. All other events work, only this event seems not to be fired.

But I can't find any reason why this event is never fired.

This is the code of the dragstart event handler:

`widget.on('dragstart', function(e){

        this.style.opacity = '0.4';

        console.log('started');
        dragSrcEl = this;
        console.log(dragSrcEl);

        console.log(this.outerHTML);
        e.originalEvent.dataTransfer.effectAllowed = 'move';
        e.originalEvent.dataTransfer.setData('text/html', this.outerHTML);
    });

`

I have made a jsFiddle, where you can find the whole code:

http://jsfiddle.net/3FLaS/

Unknown Unknown · Accepted Answer · 2013-07-18T18:27:57

I have found the answer myself:

The jQuery selector $('.widget') does not get notified when an element changes his "position".

You have to use an other selector like document, when you use the on method on this is works as expected and the event is fired at each dragstart.

`$(document).on('dragstart', '.widget', function(e){ this.style.opacity = '0.4';

    console.log('started');
    dragSrcEl = this;
    console.log(dragSrcEl);

    console.log(this.outerHTML);
    e.originalEvent.dataTransfer.effectAllowed = 'move';
    e.originalEvent.dataTransfer.setData('text/html', this.outerHTML);
});

`

Drag and Drop works only in one direction

1 Answers