Tag: jquery ui draggable

jQuery可拖放和两个容器之间的可放置和可排序: 我正在尝试开发一个具有以下function的小页面：页面将有两个div：一个是#origin，包含很多缩略图，第二个是#drop，可以放下图像（最多只有3个）。需要可以将图像从#drop拖放回原点。 #drop需要是可排序的，因为3个所选图像的顺序很重要。当放在#drop上时，图像应该对齐，就好像它们原始从头开始一样显示。我之前从未使用过jQuery，之前我甚至有一个工作页面原型，我已经通过本机HTML5拖放事件在两个容器之间进行了拖放，但是当我将sortable（）jqueryfunction添加到#drop时，图像无法再被拖回#origin，这会破坏我的function。所以，我重新开始并希望实现拖放function以及使用jQuery进行排序。我已经阅读了所有可拖动，可放置和可排序function的完整API，但是我无法让它工作。不确定这是否是我为每个function使用的设置。在小提琴上，你可以看到图像变得可拖动，我可以看到我指定的效果（不透明度，光标），但图像不能放在#drop上。根据我的理解，使图像可拖动，图像具有“可拖动”类，以及使用“.draggable”接受#drop droppable的组合，它应该允许最基本的function，但即使这样也不会采取。另外我读到如果draggable和droppable都具有相同的“范围”设置，它也应该工作，但事实并非如此。这是页面代码的简单版本，加上jsFiddle： http ： //jsfiddle.net/39khs/ 码： CSS： #origin { background-color: green; } #drop { background-color: red; min-height: 120px; } JS： $(“img”).draggable({ helper: “clone”, opacity: 0.5, cursor: “crosshair”, scope: “drop” }); $(“#drop”).droppable({ accept: “.draggable”, scope: “drop”}); $(“#drop”).sortable(); HTML： test 任何帮助是极大的赞赏。

使用jQuery UI的可拖动按钮: 我可以轻松地使元素可拖动，但不能使元素。如何使拖动？ $(init); function init() { $(‘#makeMeDraggable1’).draggable(); $(‘#makeMeDraggable2’).draggable(); } Drag me! Drag me! 查看JSFiddle

如何排除元素在可排序列表中被拖动？: 如何从可排序列表中排除元素？例如，有一个类名为’note’的元素，我不想被拖动？ Item 3 Item 4 Item 5 This is a note only jquery ui sortable，jquery显然不起作用… $(function() { $( “.sortable:not(.note)” ).sortable( }).disableSelection(); });

JqueryUI，将元素拖动到包含大表的滚动可放置div的单元格中: 我正面临拖放问题。我想要总是看到拖动的元素，我想能够滚动一个特定的div来删除我的表的任何单元格中的元素。我也希望能够将元素从任何div拖动到任何div。这个例子几乎没用。我的最后一个问题是关于单元格hoverClass属性：当我从“容器B”的边框附近的“容器A”中拖动一个元素时，我实现了一个自动滚动行为以在我的表中导航以到达任何单元格。但是，在滚动模拟之后， hoverClass不适用于正确的单元格。但是，元素总是被放入正确的单元格中。 https://jsfiddle.net/Bouillou/QvRjL/434/ 我的方法是否正确？编辑我找到了解决方法。我们的想法是在帮助器构造回调期间将元素clone附加到可滚动容器，然后在1ms后使用setTimeout函数将帮助器附加到body。辅助位置必须映射到鼠标位置以避免偏移问题。这是我的最终解决方案： https ： //jsfiddle.net/Bouillou/QvRjL/434/ 我相信有可能开发出最佳方法。

如何在具有contentEditable的元素上启用“draggable”？: 我希望使用jQuery UI同时具有可编辑和可拖动的div。内容可编辑性似乎仅在未启用可拖动时才有效。我错过了什么吗？我正在使用jQuery 1.4.4和jQuery UI 1.8.9 JavaScript的： $(function(){ $(‘#draggable’).draggable(); }); HTML： TEXT

如何以编程方式调用jQuery UI Draggable拖动启动？: 我在鼠标处于向下位置之前和释放之前创建一个新的jQuery元素。（在mousedown之后）。我想以编程方式使用jQuery UI触发对新元素的dragging ，以便它将自动开始拖动我的鼠标移动。我不想释放然后再次单击鼠标。我试过以下…… var element = $(“”); element.appendTo(“body”).draggable().trigger(“mousedown”); ……但这不起作用。有没有人对如何做到这一点有任何建议？更新：经过一番搜索，这个问题的海报有同样的问题。然而，建议的解决方案，归结为…… $(“body”).on(“mousedown”, function(e) { $(“”).draggable().appendTo(“body”).trigger(e); }); …不再适用于最新版本的jQuery和jQuery-UI，而是生成最大调用堆栈超出错误。

使用Jquery UI拖放多个选定的可拖动并恢复无效的拖动: 使用光标（套索）绘制一个框将在此JSFiddle示例中选择多个.item 。被选中的.item变得.item 。没有.item空.slot是有效的droppable。当您在多个droppable上放置多个draggable时，只有相应的droppable无效的鼠标所在的.item才会恢复。如果丢弃无效的 droppable，如何使每个可拖动的恢复？使用Javascript： $(function () { // we are going to store the selected objects in here var selected = $([]), total = [], offset = { top: 0, left: 0 }; $(document).selectable({ filter: “.item”, start: function (event, ui) { //remove draggable from selection, otherwise previous selection will still […]

JQuery可轻松拖动: 我想用Jquery的draggable来实现轻松的效果。但我没有在这个插件中找到该选项。所以我想知道是否有其他插件有这个选项 – 或一个简单的解决方案。我试图实现的效果是这样的： http ： //www.fileden.com/files/2009/6/4/2466215/dragease.swf 正如您所看到的，在拖动时，由于缓和，图像移动感觉更加平滑。我还想将拖动限制为一个轴，还需要使其恢复到原位。 JQuery的draggable确实有最后两个选项，所以这很好。示例代码已经为我提供了我想要的东西（除了缓动）： http ： //jsfiddle.net/dandoen/NJwER/1/ 任何建议将不胜感激。干杯，丹多恩

jQuery可排序和可丢弃: 我希望有一个可排序的列表，但我也希望该列表中的元素可以放到我定义为droppable的div中。我似乎无法找到办法。有任何想法吗？

限制jQuery可拖动项与重叠/与兄弟元素冲突: 我需要使用jQuery UI限制可拖动对象的包含区域，但有一些额外的限制。我需要防止draggable元素与同一容器中的其他元素重叠。我需要允许在“moveInHere”区域移动而不是“butNotHere”区域。可能吗？ $(“#dragMe”).draggable({ containment: “#moveInHere” });