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事件并手动隐藏帮助程序，否则每个元素都将始终还原。还原动画仍会发生，但您的用户将看不到它。这有点骇客，但最终的结果似乎没问题。

Answer 3

根据Jquery documentation on Selectors。

与选择器匹配的所有可拖动项将被接受。如果是一个功能指定后，将调用该函数对于页面上的每个可拖动（通过作为第一个参数功能），提供自定义过滤器。如果是，该函数应返回true 应该接受拖拽。

因此，

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

在他们的例子中，如果它具有“特殊”类，则只会表现为已经删除了某些东西。看起来它可以接受任何Jquery selector。

Answer 4

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

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_group（请记住，只是一个示例）与droppable的{{1}}匹配时才被接受，否则draggable将被还原。我认为这可能是一个非常常见的用例，也许这会对某人有所帮助。

Answer 5

这是我使用的解决方案：

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

Answer 6

我已经找到了一个解决方案，该解决方案基于以下条件：无法将draggable置于已被另一个draggable占用的droppable中：

$(".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 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");
            }
        }
    });

jquery droppable接受

8 个答案: