jQuery：如果没有成功删除帮助程序，如何阻止帮助程序被删除

Posted 2021-04-20

我有一个draggable与自定义helper。有时帮助器是克隆，有时它是原始元素。

问题是，当帮助程序是原始元素并且没有放在有效的droppable上时，它会被删除。到目前为止，我的解决方案如下：

在我的on_dropped回调中，我将ui.helper.dropped_on_droppable设置为true;

在可拖动的stop回调中，我检查该变量然后......我该怎么办？

$('.my_draggable').draggable({
    stop   : function(e, ui) {
        if (!ui.helper.dropped_on_droppable) {
            /* what do I do here? */
        }
    },

这甚至是正确的方法吗？

答案

好的，我找到了解决方案！这很丑陋，它打破了“封装规则”，但至少它完成了这项工作。

请记住，这仅适用于特殊情况！ jQuery可以很好地处理自己的帮助程序删除。在我的情况下，我有一个帮助器，有时是原始元素，有时是克隆，所以在恢复后删除帮助器并不总是合适的。

element.draggable({
    stop   : function(e, ui) {
        /* "dropped_on_droppable" is custom and set in my custom drop method
           ".moved_draggable" is custom and set in my custom drag method, 
                     to differentiate between the two types of draggables
        */               
        if (!ui.helper.dropped_on_droppable & ui.helper.hasClass('moved_draggable')) {
            /* this is the big hack that breaks encapsulation */
            $.ui.ddmanager.current.cancelHelperRemoval = true;
        }
    },

警告：这会打破封装，可能无法向前兼容

另一答案

我可能在这里遗漏了一些东西，但这不仅仅是一个添加的例子

revert: "invalid"

如果draggable是原始元素而不是克隆，那么可拖动选项？

另一答案

我使用自定义帮助器将多选择可拖动器聚合到一个div中。这似乎与恢复功能没有关系，所以我想出了这个方案。这些元素被手动附加回原始父元素，我通过.data（）跟踪它。

.draggable({
    helper: function() {
        var div = $(document.createElement('div'))
            .data('lastParent', $(this).parent());
        return div;
    },
    start: function() {
        //... add multiple selection items to the helper..          
    },
    stop: function(event,ui) {
        $( $(ui.helper).data('lastParent') ).append( $(ui.helper).children() );
    }
}

这种方法确实会失去漂亮的动画，但对于您或其他有此问题的人来说，它可能会有用。