javascript - 无法触发 drop 事件(是的，我在拖拽中阻止了 Default() )

Question

我正在开发可拖动 HTML5 列表的实现，但遇到了麻烦。

基本上，每当我拖动一个元素时，我都会将要拖动的元素插入到刚刚输入的元素之前或之后。这意味着当您移动鼠标时，该元素会不断移动到鼠标下方的位置。 (我在元素上设置了 visibility:hidden ，因此它显示为空白。)当您放下该元素时，我会向服务器发送一个 AJAX 调用，描述该元素的位置以执行移动服务器。

问题是，无论出于何种原因，放置事件永远不会触发(我的处理程序中的断点永远不会被击中)，并且拖动图像会弹回到它开始的位置。 (当然，元素已在页面上移动，因此它会重新出现在新位置，但由于 drop 永远不会触发，因此服务器永远不会收到更改通知。)有谁知道发生了什么？通常的答案是“您需要在 Dragenter/dragover 中调用 preventDefault()”，但我已经这样做了。

我使用的是 jQuery 1.10.2，并且我在 Safari 7.0.1 和 Firefox 26.0 中都看到了这种行为。就其值(value)而言，Rails 4.0.2 是我这个项目的框架，并且我使用 jquery_ujs 和turbolinks。

相关代码:

var draggingLI;

$('ol[data-passage-id]').find('li > a').attr('draggable', 'true')
.on('dragstart', function (ev) {
    draggingLI = $(ev.target).closest("li")[0];

    ev.originalEvent.dataTransfer.effectAllowed = 'move';
    ev.originalEvent.dataTransfer.setData('text/plain', ev.target.href);
    ev.originalEvent.dataTransfer.setData('text/uri-list', ev.target.href);
})
.on('dragenter', function (ev) {
    ev.originalEvent.dataTransfer.dropEffect = 'move'; 
    $(draggingLI).css('visibility', 'hidden');

    if(canDropIn(ev.target)) {
        var droppingLI = $(ev.target).closest("li")[0];

        if(draggingLI == droppingLI) {
            // do nothing
        }
        if(draggingLI.nextElementSibling == droppingLI) {
            // We want to move the dragging element below this element.
            $(droppingLI).after(draggingLI);
        }
        else {
            // We want to move the dragging element above this element.
            $(droppingLI).before(draggingLI);
        }

        ev.preventDefault();
        ev.stopPropagation();
        return false;
    }
})
.on('dragover', function (ev) {
    if(canDropIn(ev.target)) {
        ev.preventDefault();
        ev.stopPropagation();
        return false;
    }
})
.on('drop', function (ev) {
    sendMovedItem(draggingLI);
    ev.preventDefault();
    ev.stopPropagation();
    return false;
})
.on('dragend', function (ev) {
    $(draggingLI).css('visibility', '');
});

canDropIn() 目前是一个始终返回 true 的 stub 。 sendMovedItem() 是执行 AJAX 调用的函数。控制台上没有错误。

Answer 1

问题似乎是由我移动拖动元素本身的策略引起的；我不确定是否是因为在拖动元素时移动元素会导致浏览器出现问题，或者是否是因为不允许放置在原始元素上。我通过完全隐藏原始元素然后插入一个我可以移动的占位符元素来解决这个问题。 (您必须将 Dragenter/dragover/drop 处理程序附加到占位符，因为所有成功的放置都以占位符结束。)

不过，如果有人有想法的话，我仍然更喜欢不需要占位符的解决方案!