Tag: jquery ui droppable

Live Droppable UI元素仅在第二次尝试时接受Drop

我有通过Ajax动态添加到页面的JQuery UI Droppables。 尝试按照指南以实时方式连接Droppables： jQuery UI Droppable：如何让它生效？ 在第一次尝试拖放时， hoverClass没有挂钩，也没有hoverClass目标是已注册的Droppable （放置事件处理程序不会触发）。 在后续尝试中，它按预期工作。 小提琴： http ： //jsfiddle.net/ericjohannsen/ESCN9/ 如何让dropfunction第一次运行？

jquery可排序和可放置 – 无法附加放置项？

我想将已删除的项目附加到可排序列表中的目标可放置框中，但我无法将放置的项目附加到特定元素中。 我的jquery， $(“.sortable”).sortable({ update: function(){ // php update. } }).disableSelection(); $( “.droppable” ).droppable({ activeClass: “ui-state-hover”, hoverClass: “ui-state-active”, drop: function( event, ui ) { var targetElem = $(this).attr(“id”); $( this ) .addClass( “ui-state-highlight” ) .find( “p” ) .html( “Dropped! inside ” + targetElem ); alert(targetElem); var container = $( this ).find( “ul.dropped-items” ).css({border:”blue solid 1px”}); container.append(ui.draggable.clone()); […]

使用JQuery-Ui Droppable定位拖动，删除和追加的项目

我正在使用JQuery-ui draggable＆droppable。 我想将删除的元素添加到drop-target容器中，同时保留它在删除时的明显位置。 使用.html（）可以保留.draggable（）函数添加的位置数据，但由于它们成为新元素的子元素，因此它们会捕捉到相对于该元素的新位置。 我试用了helper：clone，但发现它删除了所有定位信息。 这是我的代码，它将删除的项添加到放置目标，并在每次删除上一个项时生成一个新的拖动项。 它起作用，除了掉落元素的定位是错误的 – 它们应该保持它们在掉落时的视觉位置。 var $foo = 1; var bar = “drag-” + $foo; $(“.origin div”).addClass(bar); $( “.origin div” ).draggable({ containment: “.modal” }); $( “.droppable” ).droppable({ accept: “.origin div”, drop: function( event, ui ) { $(“.droppable”).append($(‘.origin’).html()); succeed(); } }); function succeed() { $foo++; var bar = “drag-” + $foo; $(‘.origin’).html(“Drag […]

jQuery UI：可排序和可拖动+可排序和可放置

我有两个清单。 它们是可排序的但没有连接（列表“one”的元素不能与列表“two”的元素混合） 我希望列表“one”的元素可以删除，列表“two”的元素可以拖动，因为我想将列表“two”的元素拖放到列表“one”中。 我应该怎么做？ 编辑： 我试图让问题尽可能一般，但也许我应该更清楚……对不起。 列表一的元素是“类别”，它们应该是可排序的。 列表2的元素是“链接”，应该是可排序的。 链接只属于一个类别。 我想将一个链接从一个categerory移动到另一个，我很想使用JQuery Ui。

删除拖放后的可拖动元素

基本上我所拥有的是一套小玩意儿 ，我需要做的是能够将该组中的任何项目拖动到收容箱中。 一旦它们进入盒子，它们仍然可以自由移动和操纵，但是它们不能再被取出，尽管它们可以被删除。 小玩意儿也被设置为克隆，因为如果用户愿意，用户可以拥有多个项目。 所以这两个部分，设置了doodad列表（已经完成），然后使其可拖动，以便可以将其拖入droppable div框。 然后第二部分是，一旦它在div框中，它必须再次可拖动，不能克隆，并且也包含在框中。 这是我的JS代码： $(document).ready(function() { function MakeDraggable(item) { item.draggable({ revert : “invalid” }); } $(“.doodad”).draggable({ helper : ‘clone’, scroll : true }); $(“.dropped”).draggable ({ containment: “.box” }); $(“.box”).droppable({ accept : “.doodad”, activeClass : “ui-state-default”, hoverClass : “ui-state-hover”, drop : function(event, ui) { var droppedItem = $(ui.draggable).clone(); //droppedItem.class = “.dropped”; droppedItem.draggable(); […]

jQuery UI droppable’drop’事件等待恢复

我正在开发一些与jQueryUI的简单拖放交互。 在某些情况下，我希望拖动的项目回到原来的位置（ 恢复 ），然后摇动。 我把震动放在droppable对象的drop事件中，但它似乎没有等待恢复完成。 更糟糕的是，有时它会在开始恢复到原始位置之前摇晃，有时它会在完全恢复完成之后摇晃，有时则震动会在中间陷入。 这不一致。 在draggable完成其恢复 后 ，有没有办法执行droppable对象的drop事件？ 请参阅此JSFiddle以获取示例： http ： //jsfiddle.net/sbQUE/ 换句话说，如果我按如下方式设置droppable： this.$el.droppable({ drop: someFunction }); …执行的function是： someFunction: function(ev, el){ $(el.draggable).effect(‘shake’); } …并且落在droppable上的可拖动对象设置如下： this.$el.draggable({ revert: true, revertDuration: 0 // or any number for that matter }); 由于恢复选项，如何确保在draggable返回原始位置后执行“someFunction”回调？ 注意：我尝试在revert回调或事件之后寻找某种类型，但它不存在（至少在jQueryUI的文档中没有）。

ui.draggable的jquery ui错误（“destroy”）

我想删除 的拖动属性，当我将它放在容器上时。 但是我得到一个错误”Property ‘draggable’ of object # is not a function” ，对于我的代码如下。 $( “#fighter1” ).draggable(); //fighter1 is the id of draggable object $( “#fighter2” ).draggable(); $( “#fighter3” ).draggable(); $( “#fighter4” ).draggable(); $( “#fighter5” ).draggable(); $( “#fighter6” ).draggable(); $( “#dest” ).droppable({ //dest is the id of droppable object drop: function( event, ui ) { ui.draggable(“destroy”); //I […]

添加元素后重新初始化jQuery UI droppable

我有一些在页面加载时可以删除的元素。 在某些方面，我添加了更多这些元素（相同的选择器），我希望新元素也可以删除。 是唯一一个使用所有选项调用原始droppable函数的选项吗？ 你看，droppable函数调用非常大，我真的不想以这种方式复制代码。 有更优雅的方式吗？ 这是澄清的代码： $(‘td:not(.td-disabled)’).droppable({ hoverClass: “ui-state-active”, drop: function( event, ui ) { // … very big block of code } }); $(‘.td-disabled’).removeClass(‘td-disabled’); // I dont want to do this: $(‘td’).droppable({ hoverClass: “ui-state-active”, drop: function( event, ui ) { // … very big block of code } });

jQuery UI – drop事件后克隆droppable / sortable列表

基本上我有一个可拖动的项目列表，最初是一个可拖放的元素，可以将它们拖入。 将项目拖入droppable时，将克隆droppable（在附加项目之前）并附加为新的可放置区域。 看看这个被剥离的小提琴： http ： //jsfiddle.net/DKBU9/1/ （省略sortable（）） HTML foo1 foo2 foo3 JS $(‘#draggables > li’).draggable({ appendTo: ‘document’, revert: ‘invalid’ }); $(‘.droppable > li’).draggable({ appendTo: ‘document’, revert: ‘invalid’ }); $(‘#draggables’).droppable({ accept: ‘.droppable > li’, drop: function(event, ui) { ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this)); } }); $(‘.droppable’).droppable({ accept: ‘#draggables > li’, drop: function(event, ui) { if($(this).hasClass(‘new’)) { var clone […]

如果在拖动操作期间显示hoverClass，则Droppable项不显示hoverClass

我知道标题令人困惑，但问题很容易复制。 我的页面上有一些可以放置的元素（jQueryUI），并且hoverClass显示它们被拖动的时间。 但是，我有一些隐藏的元素，有时在拖动过程中显示，然后不应该响应他们的hoverClass。 我在这里有一个显示这种情况的jsFiddle，但是，如果你继续拖动div最终listItems开始显示他们的hoverClass。 但是，在我的网站上，这种情况永远不会发生…… hoverClass永远不会出现在新显示的项目上。 HTML Row1 Row2 Row3MORE… Row4 Row5 DragMe! CSS #DragMe { position: absolute; height: 100px; width: 100px; border: 1px solid black; background-color: RGBA(255,255,255,0.5); } .DragOver { background-color: #000000; color: #FFFFFF; } #More { margin-left: 10px; } JavaScript的 $(‘#DragMe’).draggable({ cursorAt: {top: 50, left: 50} }); $(‘li’).droppable({ hoverClass: ‘DragOver’ }); $(‘#More’).droppable({ over: […]