Tag: jquery ui draggable

即使掉入错误的droppable，如何禁用draggable: 我知道如何在将对象拖入正确的droppable时禁用draggable，如下所示，但是当放入错误的droppable时则不会。我希望用户即使答案不正确也无法再次拖动，这意味着只有一次尝试。我使用边缘动画，它使用不同的语法来获取元素而不是普通的JavaScript，但其余的是相同的。以下是我的评论代码。 for(j=0;j<35;j++){ sym.$(answers1[j]).addClass('drag'+j); sym.$('.drag'+j).draggable({ //revert: "invalid" // I do not want revert in any case stop: function(){ $(this).draggable('disabled'); // will disable when dropped anywhere //I want only when into the wrong droppable – //so almost good but not quite right. } }); sym.$(droppables[j]).droppable({ accept: ".drag"+j, drop: function(event,ui){ ui.draggable.draggable( 'destroy' ); // the […]

删除拖放后的可拖动元素: 基本上我所拥有的是一套小玩意儿，我需要做的是能够将该组中的任何项目拖动到收容箱中。一旦它们进入盒子，它们仍然可以自由移动和操纵，但是它们不能再被取出，尽管它们可以被删除。小玩意儿也被设置为克隆，因为如果用户愿意，用户可以拥有多个项目。所以这两个部分，设置了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在源区域和目标区域之间移动可拖动对象: 如何在源区域和目标区域之间移动可拖动对象？例如：（图1）原始位置（图2）然后移动一些项目（图3）我的问题是如何在源区域和目标区域之间移动项目 PS：我已经尝试了很多可能性，如下面的地址在droppable的out事件中将jQuery可拖动对象还原回其原始容器 http://devilmaycode.altervista.org/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of-d/ http://api.jqueryui.com/draggable/#event-stop 如果validation失败，有没有办法将Jquery拖放恢复到原始位置？ jQuery UI – 将jQuery draggable对象恢复为原始对象？图片1 图片2 图3 所有代码 div ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } div ul li { margin: 5px; padding: 5px; width: 150px; } A D Item 1 Item 2 Item 3 A1 D1 Item 11 Item […]

Jquery拖放 – 在可拖动的拖放中设置可点击区域: 这是在Jquery拖放时发布的后续问题- 在drop上单击事件寄存器我正在使用jquery拖放。可拖动元素包含两个左右浮动的嵌套div。左侧div包含draggable上的文本，右侧div包含一个小的“info”按钮，用于切换工具提示。在drop，我希望包含draggable文本的左嵌套div可以点击。 drop由以下函数处理： function handleElementDrop( event, ui ) { var slotNumber = $(this).data( ‘number’ ); var elementNumber = ui.draggable.data( ‘number’ ); if ( slotNumber == elementNumber ) { ui.draggable.css( ‘cursor’, ‘pointer’ ); ui.draggable.parent().find(‘.element_left’).click(function(e) { window.open(ui.draggable.attr(‘data-link’)); }); ui.draggable.parent().find(‘.info’).addClass(‘correct’); ui.draggable.addClass( ‘correct’ ); ui.draggable.draggable( ‘disable’ ); $(this).droppable( ‘disable’ ); ui.draggable.position( { of: $(this), my: […]

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 – 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 […]

在页面上追加/添加后添加jquery ui function draggable / resizeable: 我的网页有问题，当用户点击特定按钮时，我在文档中添加了一个元素。元素是 Some text 的script.js $(‘#button’).click(function() { $(“#pageWrap”).append(element) }) $(‘.draggableResizable’).draggable().resizable() 欢迎任何建议。谢谢。

在jquery中拖动元素时显示自定义图像: 我正在使用JQuery UI来拖放树节点并且工作正常。我需要根据更多的用户交互来即兴表达。当我拖动任何元素时它显示相同的元素名称，你可以在图像中看到（测试3我已经拖到了下面）。但我的要求是当我拖动任何树节点时，它应该显示指定的图像，而不是相同的文本。可能吗？我的可拖动function如下，我需要做些什么改变才能达到要求。 $(“li a”).draggable({ revert: “invalid”, containment: “document”, helper: “clone”, cursor: “move”, start: function(event, ui) { var draggedId = event.target.id; } });