Question

我正在努力实现可拖动的HTML5列表并遇到麻烦。

基本上，每当我拖动一个元素时，我会在我刚输入的元素之前或之后立即插入我正在拖动的元素。这意味着当您移动鼠标时，元素将继续移动到鼠标下方的位置。（我在元素上设置visibility: hidden，因此它显示为空格。）当您删除元素时，我会向服务器发送一个AJAX调用，描述元素在服务器上执行移动的位置。

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

我正在使用jQuery 1.10.2，我在Safari 7.0.1和Firefox 26.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调用的函数。控制台上没有错误。

Answer 1

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

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

无法获取掉落事件（是的，我在dragover中阻止了默认（）编辑）

1 个答案: