Javascript Can'；无法触发drop事件（是的，我在dragover中已阻止默认值（））

我正在开发一个可拖动的HTML5列表，但遇到了麻烦

基本上，每当我拖动一个元素时，我都会在刚输入的元素之前或之后插入我正在拖动的元素。这意味着当您移动鼠标时，元素会一直移动到鼠标下的位置。（我在元素上设置了

visibility:hidden

，因此它显示为空白。）当您删除元素时，我会向服务器发送一个AJAX调用，描述元素在服务器上执行移动的位置

问题是，无论出于何种原因，drop事件从未触发（我的处理程序中的断点从未命中），并且拖动图像会捕捉回它开始的位置。（当然，元素已在页面上移动，因此它会重新出现在新位置，但由于drop从未触发，服务器从未收到更改通知。）有人知道发生了什么吗？通常的答案是“您需要在dragenter/dragover中调用

preventDefault（）

”，但我已经在这么做了

我正在使用jQuery1.10.2，我在Safari7.0.1和Firefox26.0中都看到了这种行为。值得一提的是，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

的存根

sendMovedItem（）

是执行AJAX调用的函数。控制台上没有错误。

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

不过，如果有人有想法，我还是更喜欢不需要占位符的解决方案