拖放仅在一个方向上起作用答案

【问题标题】：Drag and Drop works only in one direction拖放仅在一个方向上起作用
【发布时间】：2013-07-17 11:14:57
【问题描述】：

我对 Javascript 中的拖放 API 有疑问。我有两个区域，一个称为 widgets，另一个称为 selection。现在我希望能够从一个区域拖放小部件。这已经有效，但只有当我将小部件拖到选择面板时。

当我想把它拖回 widgets 面板时。这没用。根据我的调试，永远不会调用 dragstart 事件。所有其他事件都有效，只有这个事件似乎没有被触发。

但我找不到任何理由说明此事件从未被触发。

这是 dragstart 事件处理程序的代码：

`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);
    });

我做了一个jsFiddle，你可以在里面找到整个代码：

http://jsfiddle.net/3FLaS/

【问题讨论】：

标签： javascript drag-and-drop

【解决方案1】：

我自己找到了答案：

当元素改变其“位置”时，jQuery 选择器$('.widget') 不会收到通知。

您必须使用其他选择器，例如 document，当您使用 on 方法时，它会按预期工作，并且在每次 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);
});

【讨论】：