javascript - jquery 可丢弃接受

Question

谁能告诉我如何在接受条件下编写函数，然后它如何找出可以接受和不接受的内容。例如，我想接受div a并div b处于接受状态。如何通过函数编写 I？

Answer 1

如果您希望 droppable 接受选择的元素，您可以执行以下操作：

$(".droppable").droppable({
    accept: function(d) { 
        if(d.hasClass("foo")||(d.attr("id")=="bar")){ 
            return true;
        }
    }
});

这个 droppable 将接受类为“foo”的元素或 id 为“bar”的元素

Answer 2

如果我正确理解您的问题，您希望根据自定义代码有条件地接受删除的元素。Aberon 的回答是典型的情况：您希望只允许根据其类删除某些可拖动选项，而所有其他选项都将还原。如果这回答了你的问题，那很好。

但是，有时会根据比类匹配更复杂的情况来有条件地发生还原动画。在我自己的项目中，我使用拖放将用户添加到组中。如果删除的用户已经在组中，我希望用户帮助元素恢复。否则，我会继续使用 AJAX 操作来插入它们。这不能替代后端检查，但它是很好的视觉反馈。

我在别处寻找了一个简单的答案。JQuery 维护者注意：对我来说，最直接的方法是在 drop 函数中向事件对象添加一些属性，如下所示：

$('.target').droppable({
    accept: '.valid'
    drop: function(event, ui) {
        if(isDropOK() == true) {
            // add child here
        } else {
            event.revert = true;
        }
    }
});

可悲的是，这不起作用。不过，这就是“起作用”的方法：将可拖动元素设置为始终还原，然后在满足条件时隐藏助手。您可以通过查找页面上唯一具有“.ui-draggable-dragging”类的元素来获取对帮助程序的引用。这是一个示例，用您自己的逻辑替换“isDropOK()”：

$('.valid').draggable({
    revert: true,
    helper: 'clone',
    opacity: 0.5
});

$('.target').droppable({
    accept: '.valid'
    drop: function(event, ui) {
        if(isDropOK() == true) {
            $('.ui-draggable-dragging').hide();
            // add child here
        }
    }
});

所以回顾一下，除非你介入 drop 事件并手动隐藏 helper，否则每个元素都会恢复。还原动画仍然会发生，但您的用户不会看到它。这是一个小技巧，但最终结果似乎一切正常。

Answer 3

根据关于 Selectors 的 Jquery 文档。

与选择器匹配的所有可拖动对象都将被接受。如果指定了函数，将为页面上的每个可拖动对象调用该函数（作为第一个参数传递给函数），以提供自定义过滤器。如果应接受可拖动对象，则该函数应返回 true。

因此，

$('.selector').droppable({ accept: '.special' }); 

在他们的示例中，如果它具有“特殊”类，则只会将其视为已将某些东西掉落在其上。看起来它可以接受任何Jquery 选择器。

Answer 4

除了Alex answer是我在这个问题上找到的最佳答案之外，我想补充一点，如果您想检查 and 之间的匹配属性droppable，draggable您可以使用关键字this访问accept函数中的 droppable。这是我最近使用的一个小例子：

accept : function (draggable) {
  var id_group_drop, id_group_drag;

  //get the "id_group" stored in a data-attribute of the draggable
  id_group_drag = $(draggable).attr("data-id-group");

  //get the "id_group" stored in a data-attribute of the droppable
  id_group_drop = $(this).parent().attr("data-id-group");

  //compare the id_groups, return true if they match or false otherwise
  return id_group_drop == id_group_drag;
}

所以draggable只有当它id_group（记住，只是一个例子）与id_groupof匹配时才被接受droppable，否则draggable将被还原。我认为这可能是一个非常常见的用例，也许这会对某人有所帮助。

Answer 5

我已经找到了一个解决方案，该解决方案基于以下条件：不应将任何可拖动对象放置在已被另一个可拖动对象占用的可放置对象中：

$(".placement").droppable({
    accept: function(elm) {
        // only allow draggables to the placement if there's no other draggable 
        // in the droppable
        if (!$(this).attr('isbusy'))
            return true;
    },
    drop: function(event, ui) {
        $(this).attr('isbusy', 'yeap'); // fill key with something

        var draggable = $(ui.draggable[0]);
        // free the draggable's previous droppable 
        if (draggable.attr('droppable')) {
            $('#' + draggable.attr('droppable')).attr('isbusy', '');
        }

        // save the new draggable's droppable
        draggable.attr('droppable', $(this).attr('id'));
    },
});

Answer 6

这是我使用的解决方案：

... accept: '#diva,#divb', ...

Answer 7

除了使用类作为接受之外，您可以只使用类似的函数，如果它符合您的条件则返回 true

$('#mydroppable').droppable(
{
    accept: function() { return true; },
    drop: function () { alert("Dropped!"); }
});

Answer 8

这是我的解决方案：

var foo = true;

$( ".draggable" ).draggable({ 
                        revert: function(){if(foo == true){return true;}else{foo = true;}},
                         });

    $("#droppable").droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            if($this == $that){
                foo = true;
                alert("this will revert the draggable back to original position");
            }else{
                foo = false;
                alert("this will NOT revert the draggable back to original position");
            }
        }
    });