jquery droppable接受

任何人都可以告诉我如何在接受条件下编写函数，然后它如何找出接受什么和不接受什么。 例如，我想在接受条件下接受div a和div b 。 我如何通过函数编写代码？

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

将接受与选择器匹配的所有可拖动项。 如果指定了一个函数，则将为页面上的每个draggable调用该函数（作为函数的第一个参数传递），以提供自定义filter。 如果应该接受draggable，则该函数应返回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 （记住，只是一个例子）与droppable的id_group匹配时才会接受draggable ，否则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"); } } });