jquery 可丢弃接受

Posted 2023-05-08

【中文标题】jquery 可丢弃接受

【英文标题】：jquery droppable accept

【发布时间】：2010-11-29 11:46:40

【问题描述】：

谁能告诉我如何在接受条件下编写一个函数，然后它如何找出接受什么和不接受什么。 例如，我想在接受条件下接受div a 和div b。如何通过函数编写 I？

【参考方案1】：

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

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

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

【讨论】：

+1 因为这是这个问题的最佳答案。除此之外，如果您想将draggable 的属性与droppable 的属性进行比较，请在accept 函数中使用this 来访问droppable。我给这个问题写了一个小example as 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，否则每个元素都将始终还原。还原动画仍然会发生，但您的用户不会看到它。这有点小技巧，但最终结果似乎可以正常工作。

【讨论】：

也可以通过调用 ui.helper() 获得对 helper 的引用

只有在您使用助手时才有效。否则 helper 是可拖动的，这将不起作用。

【参考方案3】：

根据Jquery documentation on Selectors.

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

因此，

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

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

【讨论】：

我很乐意为您提供 +1 以了解问题所在。

【参考方案4】：

除了Alex answer这是我在这个问题上找到的最佳答案，我想补充一点，如果你想检查droppable和draggable之间的匹配属性，你可以使用关键字@987654324 @ 访问您的 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（记住，只是一个例子）与droppable 的id_group 匹配时才被接受，否则draggable 将被还原。我认为这可能是一个非常常见的用例，也许这会对某人有所帮助。

【讨论】：

这对我有帮助！谢谢。

【参考方案5】：

这是我使用的解决方案：

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

【参考方案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'));
    ,
);

【参考方案7】：

您可以只使用一个函数，而不是使用一个类作为接受 如果它符合您的条件，则返回 true

$('#mydroppable').droppable(

    accept: function()  return true; ,
    drop: function ()  alert("Dropped!"); 
);

【参考方案8】：

这是我的解决方案：

var foo = true;

$( ".draggable" ).draggable( 
                        revert: function()if(foo == true)return true;elsefoo = 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");
            
        
    );