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;
        }
    }
});

This 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 文档。

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

因此，

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

在他们的示例中，如果它具有“特殊”类，则只会表现得好像有东西掉在上面一样。看起来它可以接受任何 Jquery 选择器。

Answer 4

除了 Alex 答案（这是我在这个问题上找到的最佳答案）之外，我想补充一点，如果您想检查 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;
}

因此，仅当 id_group（记住，只是一个示例）与 id_group 匹配时，才接受 draggable droppable 的 >，否则 draggable 将被恢复。我认为这可能是一个非常常见的用例，也许这会对某人有所帮助。

Answer 5

这是我使用的解决方案：

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

Answer 6

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

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