Tag: jquery ui draggable

Draggable Resizable无法在Chrome中运行: 我在使用chrome中的图像上进行可resize和可拖动的工作时遇到了一些问题。我的页面有一个（可拖动的）图像列表，可以放在div上（图像被克隆）。丢弃的图像应该可以resize和拖动。我写了以下Javascript： $(function() { $(“.scrollable”).scrollable(); $(“.draggable”).draggable({ helper: ‘clone’, appendTo: ‘body’ }); $(“#canvas”).droppable({ accept: ‘.draggable’, drop: function(e, ui){ if (ui.draggable.attr(“class”).indexOf(‘item’) == -1){ var clone = $(ui.draggable).clone(); clone.removeClass(“ui-draggable draggable”); clone.addClass(‘item’); $(this).append(clone); $(‘.item’).resizable({ containment: ‘parent’, aspectRatio: true }).parent().draggable({ containment: ‘parent’ }); } } }); }); 这在Firefox中生成以下代码，完美地运行：但是在chrome中，元素被拖动和克隆，但它们没有显示。从以下代码生成中可以明显看出：但是，我无法理解为什么图像的宽度和高度以及相应的外部div的宽度和高度达到0px。一个简单的解决方案是在javascript中改变高度/宽度，但我相信会有更好的解决方案。谢谢你的帮助。

多个可丢弃的: 我有多个可放置的div（都具有相同的大小）和一个可拖动的div。可拖动的div比一个droppable大3倍。当我在droppables div上拖动可拖动的div时，我想找到哪个droppable受到影响。我的代码如下所示： $(function () { $(“.draggable”).draggable({ drag: function (event, ui) { } }); $(“.droppable”).droppable({ drop: function (event, ui) { alert(this.id); } }); }); HTML drop in me1! drop in me2! drop in me2! drop in me2! drop in me2! drop in me2! drop in me2! drop in me2! Drag 但我的警报只显示我的可拖动div（Div0）命中的第一个，我怎么能找到丢失的（Div1和Div2），这也是受到影响的？这是一个有同样问题的人： http […]

jQuery UI如何在父级父级上设置可拖动包含选项: jQuery UI Draggable交互有一个很好的属性，可以将包含设置为父包含。 $( “.selector” ).draggable({ containment: ‘parent’ }); 我希望将收容设置为父母的父母。没有字符串值可以实现这一点，因为字符串是选项 ‘parent’，’document’，’window’，[x1，y1，x2，y2] 我可以在页面加载时计算父级父级的x1，y1，x2，y2，并使用这些值来设置容器相对于文档的边界。但是，如果在页面加载后调整窗口大小，则容器位置可以相对于父级的父位置进行更改。无论窗口大小调整，本机“父”选项都将可拖动元素保留在父元素中。有没有办法使用父母的父母完成这个可拖动的收容？。

jQuery draggable，在父div之外删除的事件: 我有一个照片列表，并且我已添加了draggable，但是当将照片拖到父div之外时，我想要更改它的类，这样就表明如果删除它，它将被删除，然后当用户丢弃它，我希望它启动一个function。（只有在父div之外）所以当li被拖到.photos之外时，会触发添加类，然后如果它被丢弃在它之外，那么它会触发并触发事件以将其删除。

jquery拖放，删除和克隆，找到元素的删除位置: 在这里，我是jquery拖放，删除和克隆function的小提琴。问题：我的问题是：当我丢弃元素时，它显示： position: {top: 0, left: 0} 仅适用于draggable，clone和droppable元素。我还编写了仅使用draggablefunction查找位置的代码，并且工作正常。我希望这种行为在draggable, droppable with clone feature放置draggable, droppable with clone feature 请访问JSFiddle 小提琴全屏输出

可以点击jquery draggable parent开始拖动吗？: 我有这样的标记像这样的JS： $(‘#colorpicker-selector’).draggable({ containment : $(‘#colorpicker-background’), handle : $(‘#colorpicker-selector’) }) 当用户onmousedown在#colorpicker-background上触发时，我将#colorpicker-selector移动到mousedown所在的位置。问题是，即使选择器现在位于光标下，用户也无法继续拖动。我已经尝试在#colorpicker-selector上触发drag，dragstart，mousedown，mousedown.draggable，基于我读过的各种post，我没有运气。这里的另一个用户遇到了同样的问题，但它是从6个月前开始的，没有答案，也有不同的jQuery版本（因为之后有很多更新）： jquery在点击另一个时开始拖动对象

无法获得JQuery Draggable插件吗？: 我是JQuery新手，我正在尝试使用Draggable插件创建一个示例页面。页面加载正常，但我无法将我的标签拖到任何地方。我一直试图复制这个演示。这是我的代码： #draggable { width: 150px; height: 150px; padding: 0.5em; border: solid 1px black; cursor:pointer;} $(document).ready(function() { $(“#draggable”).draggable(); }); Drag me around 我只是想做到这一点，所以我可以在它周围的“demo” 拖动我的“draggable” 。任何人都能看到我错过的东西吗？

使用jQuery UI使可拖动元素在droppable中可排序: 解决所以我用connectWith属性稍微研究了sortable() ，发现解决方案比我想象的要简单，但是由于draggable()和droppable() ，我认为它有点倒退。这是小提琴： http ： //jsfiddle.net/DKBU9/12/ 原始问题如下：这是以前的SO问题的延伸，我认为应该将其分开。最初的问题在这里： jQuery UI – 在drop事件之后克隆droppable / sortable列表。它涉及重新初始化克隆元素上的droppable处理程序。最重要的是，我试图允许从初始列表中拖动的元素在可放置列表中进行排序。这是一个小提琴，基本上是原始问题的结果： http ： //jsfiddle.net/DKBU9/7/ 和所需的代码，因为SO喜欢抱怨和膨胀这些post： HTML foo1 foo2 foo3 JS $(function() { $(‘#draggables > li’).draggable({ appendTo: ‘document’, revert: ‘invalid’ }); $(‘.droppable > li’).draggable({ appendTo: ‘document’, revert: ‘invalid’ }); $(‘#draggables’).droppable({ accept: ‘.droppable > li’, drop: function(event, […]

将基于百分比的项目拖动到包含元素: 这是它的样子; $( “#box ul li” ).draggable({ helper: “clone” }); $( “.item” ).draggable({containment: “.door”}); $( “.door” ).droppable({ accept: “:not(.ui-sortable-helper, .item)”, drop: function( event, ui ) { $( “” ).html(ui.draggable.find(“img”)).appendTo(this); } }); 用户拖动$（“＃box ul li”）元素并将其放在$（“。door”）元素上。它将它附加到带有$（“。item”）选择器的$（“。door”）元素。我正在使用jquery UI – Draggable来拖放项目。那里没有问题。这是实际的问题; 但是当你开始拖动元素时，函数会改变元素的左侧和顶部位置，如; 上图：10px左：10px 。但我想将基于百分比的项目拖到包含元素。它应该是最高的：10％; 左：10％。关于如何做到这一点的任何想法？

jquery：如何更新可拖动的克隆ID？: 我想将可拖动项添加到可排序列表中，这在http://jsbin.com/ipese5/35上的示例中工作正常问题是我想在拖动到可排序列表时更新克隆项的id。奇怪的是，下面的代码在de ui对象中将id更新为“new-id”（我可以在我的控制台中看到），但是在实际的页面html上没有更改id。有人有解决方案吗？ $( “#init .block” ).draggable({ helper: “clone”, connectToSortable: “.list” }); $(“.list”).sortable({ connectWith: “.list”, receive: function(event, ui) { $(ui.helper).attr(“id”,”new-id”); console.log(ui); // surprisingly the next line works fine, but is not neccesary // $(ui.item).attr(“id”,”new-id”); } }); Drag me Drag me Drag me Sort me Sort me