Tag: jquery droppable

使用Sortable / Droppable调用Drop（）两次: 我在这里有这个代码。我有两个问题：在receive函数中，我们如何才能将刚刚放入可排序元素中的元素放入？不是用来放弃一个新的那个，而是那个被放入列表的实际的那个？由于我找不到，我决定使用drop（）函数，但现在，为什么该函数被调用两次？！我不希望这样！ $( “#sortable” ).droppable({ activeClass: “ui-state-default”, hoverClass: “ui-state-hover”, drop: function( event, ui ) { $(ui.draggable).editable(function(value, settings) { return(value); },{ tooltip : “Click to edit” }); } }).sortable({ revert: true, receive: function(event, ui) { $(this).children(“li”).each(function(index) { $(this).attr(“id”, “content-” + index); }); } });

使用jQuery UI添加另一个图像后删除克隆的图像: 我从上一个问题中得到了一个很好的解决方案，即在删除后成功克隆图像。这是代码： $(function() { var makeDraggable = function(element) { element.draggable({ revert: “invalid”, appendTo: “#droppable”, helper: “clone” }); } $( “#droppable” ).droppable({ activeClass: “ui-state-default”, hoverClass: “ui-state-hover”, drop: function(event, ui) { var newClone = $(ui.helper).clone(); makeDraggable(newClone); $(this).after(newClone); } }); // Initalise the program by making first draggable: makeDraggable($(“.draggable img”)); 但问题是我想在目标区域一次只显示一个图像。但目前显示所有丢弃的图像。更具体地说，当用户在目标区域中放下图像并随后拖动另一个图像时，应该从放下的或目标区域中移除先前的图像，并且在目标区域中仅应该看到新图像。看到这个演示： jsFiddle示例我该如何解决这个问题？

使用jQuery UI删除目标区域后克隆可拖动: 我想让一些图像尽可能多地放在目标区域。但是图像只下降了一次。我的jQuery UI代码： $(function() { $( “.draggable img”).draggable({ revert: “invalid”, appendTo: “#droppable”, helper: “clone” }); $( “#droppable” ).droppable({ activeClass: “ui-state-default”, hoverClass: “ui-state-hover”, drop: function( event, ui ) { $( this ).find( “.placeholder” ).remove(); var image = $(“.ui-draggable”); $( “” ).image.src.appendTo( this ); } }); }); 请看这里的演示： jsFiddle示例从示例中，您可以看到图像仅在第一次出现在div区域中。但我希望用户能够在目标区域中拖放同一图像多次。因此，例如，用户可以将图像拖放5次，并且将在目标区域中克隆 5个图像。我怎样才能做到这一点？

JQuery UI：取消Droppable Drop可排序: 我正在使用JQuery 1.5.1和JQuery UI 1.8.11。我已经添加了一些项目的可排序 – 这里的任务是允许拖动排序，这一切都很好。但我也希望合并droppable，以便可以将项目放到“复制我”区域 – 任务将复制项目（我稍后会工作）问题是可放置目标位于可排序列表的底部（我不想移动它），一旦发生丢弃，可排序项目就会移动到列表的底部。我想要做的是在drop事件触发时取消此类。你可以在这里看到我的问题（只需将“Item 1”拖到“Drop to Copy Item”区域，你就会看到排序没有被取消）正如您所看到的，我在droppable“drop”事件中尝试了以下内容（从JQuery UI Docs建议），但它似乎不起作用…… $(this).sortable(‘cancel’); 我也对如何实现我正在寻找的“复制”效果的任何其他建议持开放态度。谢谢

创建位于彼此顶部的多个可放置的兄弟姐妹: 我试图在彼此旁边创建多个jquery droppable，其中一些部分可能重叠，在这些情况下，我希望顶部的那个（z-index wise）是贪婪的。我已尝试在droppable中设置greedy: true选项，但这似乎没有帮助。我还尝试在drop事件上return false并使用event.stopPropagation(); 。这是一个基于jquery 演示页面的jsfiddle 。有没有办法阻止drop事件传播，如果有另一个droppable触发它，最好是具有最高z-index的那个？

删除iframe中的元素，否则还原: 编辑：1 这是drag.html（主页） – jQuery UI Sortable – Handle empty lists .drag {padding:10px;border:1px solid blue;margin:20px;} $(function() { $( “.drag” ).draggable({ helper: “clone”,iframeFix: true, revert : ‘invalid’,cursor: “move”}); $(‘#frame’).load(function(){ $(‘#frame’).contents().find(‘#sortable3’).droppable({ accept: “.drag”, drop: function( event, ui ) { var html = ”+ ui.draggable.html() + ”; //alert(html); $(this).append(html); } }); }); }); Drag 1 Drag 2 Drag 3 […]