0

我正在研究可拖动的 HTML5 列表的实现并遇到了麻烦。

基本上，每当我拖过一个元素时，我都会在我刚输入的元素之前或之后插入我正在拖动的元素。这意味着当您四处移动鼠标时，元素会不断移动到鼠标下方的位置。（我visibility: hidden在元素上设置，所以它显示为一个空格。）当你放下元素时，我会向服务器发送一个 AJAX 调用，描述元素的位置以在服务器上执行移动。

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

我正在使用 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 调用的函数。控制台上没有错误。

4

1 回答 1

0

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

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

于 2014-01-04T22:47:08.447 回答