Tag: jquery draggable

选中添加的div是可拖动的: 我希望我添加的div可以拖动。我可以通过添加$(“div[id^=new-text]:last”).draggable(); 但这不起作用。我的完整示例链接这是代码： var count=0; $(function() { $(“.add-new”).click(function() { $(‘.image’).append(“Edit me”); count++; }); $(‘#writable’).keydown(function() { var writable_value = $(‘#writable’).val(); $(“div[id^=new-text]:last”).text(writable_value); }); /*change font family*/ $(“#fs”).change(function() { //alert($(this).val()); $(“div[id^=new-text]:last”).css(“font-family”, $(this).val()); }); $(“#fc”).change(function() { //alert($(this).val()); $(“div[id^=new-text]:last”).css(“color”, $(this).val()); }); /* change font size */ $(“#size”).change(function() { $(“div[id^=new-text]:last”).css(“font-size”, $(this).val() + “px”); }); $(“div[id^=new-text]:last”).draggable(); })

如何使用jquery拖动其他图像来触发拖动图像: 我正在使用jquery拖动图像。以下是我的代码 $( “#imgMaster” ). draggable ({ axis: “y”, containment:[0,170,0,430], start: function(event, ui) { $(“#imgFrontLeft”).trigger(‘draggable’); } }); $( “#imgFrontLeft” ). draggable ({ axis: “y” , containment:[0,162,0,290], }); 我的要求是，在#imgMaster拖动时，必须拖动#imgFrontLeft。两个图像都是独立拖动的。请帮助我，我怎么能满足我的要求。

为什么Draggable对象具有缓慢的占位符？: 我真的没有问题但是，我注意到Draggable对象有时候占位缓慢。我做了这个测试： http ： //jsfiddle.net/X3Vmc/ $(function () { $(“#myproducts li”).draggable({ /*appendTo: “body”,*/ helper: “clone”, connectToSortable: “#mylist”, tolerance: “pointer” }); $(“#mylist”).sortable({ placeholder: “sortable-placeholder”, over: function () { console.log(“over”); }, out: function () { console.log(“out”); } }); }); 在draggable中添加列表的对象很容易没有问题，但是当我尝试在可拖动对象中移动元素时，我发现红色占位符的移动速度很慢。我的意思是，有时候水平移动元素，占位符会有更多时间移动（更新其位置）。我必须在新位置移动鼠标以更新占位符的位置。我想让它更具react native。这可能吗？编辑：看一下图片。如你所见，我正在第一个和第二个位置之间移动一个元素（从第四个位置）。正如您所看到的，占位符远离那里。编辑2：我正在使用* Chromium 30.0.1599.114 Ubuntu 13.10（30.0.1599.114-0ubuntu0.13.10.2）*

使用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 Draggables和Droppables定位: 我正在使用jquery UI和jQuery draggable ，我的所有draggable都使用jquery clone helper并将draggable追加到droppable 。这是我的代码 $(‘#squeezePage #droppable’).droppable({ tolerance: ‘fit’, accept: ‘#squeezeWidgets .squeezeWidget’, drop: function(event, ui) { var dropElem = ui.draggable.html(); var clone = $(dropElem).clone(); clone.css(‘position’, ‘absolute’); clone.css(‘top’, ui.absolutePosition.top); clone.css(‘left’, ui.absolutePosition.left); $(this).append(clone); $(this).find(‘.top’).remove(); $(this).find(‘.widgetContent’).slideDown(‘fast’); $(this).find(‘.widgetContent’).draggable({ containment: ‘#squeezePage #droppable’, cursor: ‘crosshair’, grid: [20, 20], scroll: true, snap: true, snapMode: ‘outer’, refreshPositions: true }); $(this).find(‘.widgetContent’).resizable({ […]

JQuery UI Draggable＆Droppable“Revert”和“Out”冲突: 我试图使它可以拖动多个可拖动的项目只能拖放到1个droppable。如果丢弃在droppable之外然后恢复。除了一个bug之外，我的大部分代码都有效：用户将项目拖放到droppable中。然后拖出（执行输出function）然后他没有放入droppable（恢复发生，拖动回到之前的droppable）。有效发生的事情是droppable现在可以接受任何拖动（因为拖动离开，执行），而拖动从未实际因为恢复而离开。我一直试图解决这个问题几个小时，并已经通过API。我甚至尝试使用回调函数进行还原，但由于对如何检索可拖动的droppable的困惑，我被卡住了。 //revert if not dragged to a draggable. $( “[id|=drag]” ).draggable({ revert: ‘invalid’, revertDuration: 350 }); $( “.dropZone” ).droppable({ drop: function(ev,ui) { $(this).droppable(‘option’, ‘accept’, ui.draggable); //only accept the current drag. }, out: function(ev, ui) { $(this).droppable(‘option’, ‘accept’, ‘[id|=drag]’);//now you can accept any drag. } }); jsFiddle： http ： […]

Jquery UI可拖动不滚动可排序容器: 我有一些可拖动的项目（#draggable li），我将它们拖放到可排序的（#sortable）中。 sortable由两个div包装，最外面的div有overflow-y：scroll。拖放机制工作正常，直到可排序列表扩展和滚动。当我尝试拖动并直接在可排序项上放置一个项目时，我无法使用可排序的滚动条以我想要的方式自动滚动（比如想要上升到第一个元素上方或者下降到下方最后一个元素）。但是当我尝试拖动它们之间的项目时，滚动条会在拖动时自动滚动。它是一个错误还是我的代码工作方式有错误。这是完整的代码： Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 // CSS #sortable, #draggable { list-style-type: none; margin: 0; padding: 0 0 2.5em; margin-right: 10px; } #sortable li, #draggable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } .marker{ background: […]

让jQuery可拖动以捕捉到特定网格: （注意：有些人提出了类似的问题，但过于具体而没有得到有用的答案） jQuery UI的可拖动窗口小部件具有捕捉到网格的选项，但无法设置网格相对于什么。例如，我们的放置目标中有一个明确定义的20×20网格。在放置目标内从0,0开始的拖动项将与网格对应捕捉。但是，从不同位置开始或在放置目标外部的拖动项目将不会与该网格对齐。 http://jsfiddle.net/FNhFX/5/ HTML： Drag me Drag me Drag me JS： $(function() { $(“.drag-item”).draggable({ grid: [20, 20] }); $(“.outside-drag-item”).draggable({ grid: [20, 20], helper:”clone” }); $(“.drop-target”).droppable({ accept: “.drag-item” }); }); 有没有办法使用jQuery draggable捕捉到特定的网格？