Tag: jquery ui draggable

jQuery $（ui.draggable）.remove（）不使用IE: 我可以让IE删除对象，只要它不是当前的可拖动对象。这适用于Chrome和Firefox。有什么我做错了吗？ One Two Drop items here and they should be removed. $(“#list”).sortable({ items: ‘li’ }); $(‘#bucket’).droppable({ drop: function(event, ui) { $(ui.draggable).remove(); }, accept: ‘.dropme’ });

jQuery UI可排序/可拖动导致窗口跳转: 在我的网页上，我有一个包含可排序UL的div，每当我滚动到页面底部并拖动最后一个LI我的页面跳转并且滚动条（在整个窗口上）增长。这是一个几乎捕捉到我的问题的JSFiddle ： www.jsfiddle.net/u5afykpf 。要查看与我发生的事情相近的事情，请滚动到底部并向下拖动最后一个元素。您将看到滚动条增长和移动。然而，在我的页面上，如果有更多的内容和高度，这会导致窗口的移动，这显然是明显的和不希望的。如果你去jqueryui draggable演示，减少窗口高度并拖动最后一个元素，你会发现它们不会发生这种情况。有没有人有jQuery UI可拖动和CSS建议的经验，他们可以让我阻止这种跳跃发生？我想做的一件事就是给出围绕UL position: absolute的div position: absolute但是它不在流程中，布局完全搞砸了。

在将.draggable元素的子元素移动到目标之前，如何清除它们的样式？: 我有一个div，我使用优秀的fcbkcomplete jquery插件对列表项进行一些操作。然而，当我用可拖动和可排序的页面插入它时，我意识到当我移动它时，额外的装饰会被冻结。至少可以说，这使最终结果感觉不完整。我知道我可以在拖动之前拦截mousedown事件，但我不知道要修改哪些元素以保持样式简单。这是fcbkcomplete的演示，它类似于facebook的消息撰写function。在我的jsfiddle中，一旦我准备将div拖到下面的可排序列表中，我想要所有花哨的装饰（关闭图像，分离成蓝色框，“开始输入…”工具提示，以及最后的空文本框到被一个简单的字符串取代，这样当我点击h1标题时，我仍然可以检索这些值。有人知道怎么做吗？ $(“#draggable”).draggable({ connectToSortable: “#sortable”, helper: “clone”, revert: “invalid”, distance: 20 }); $(‘#draggable’).each(function () { $(this).mousedown(function () { // Need to clear styles here //$(this).parent().children(‘.maininput’).hide(‘blind’, 500); }); }); 谢谢你的期待。 JSFiddle就在这里。这是问题的截图。

如果在拖动操作期间显示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: […]

设置可拖动div的位置: 我正在使用jQuery和JQuery ui做一些小应用程序。我已经定义了一个可拖动的div，它工作得很好，但我想在点击一个按钮时设置div的位置…… 我在这里阅读stackOverflow来做到这一点： element.position().top = topUserDefined; element.position().left = leftUserDefined; 我在这个赋值之前和之后做了一个关于element.position（）。top的警告，并且没有分配它的新值，它保留了原始值… 任何的想法？？？谢谢！

如何在jquery中选择与可拖动div重叠的所有div？: 我正在构建一个显示随时间发生的事件的图表。我的每个事件都是一个使用创建的水平条，如下所示： aaaa bbbb cccc dddd 在这张图的顶部，我有一个“标尺”，它是一个可拖动且可resize的 Ruler 我的目的是水平拖动这个标尺并使用它来选择标尺下方的所有图形条。选择条形时，背景颜色应该更改。到目前为止，我设法使用以下代码拖动并调整我的标尺大小： $(function () { $(“#draggable2”).draggable({ axis: “x” }); }); $(function () { $(“#draggable2”).resizable({ helper: “ui-resizable-helper”, handles: “se, sw, e, w” }); }); 我还设法使用以下代码选择我想要的栏： $(“.fake”).selectable({ filter: “div” }); 您可以在下面提到的小提琴中看到，当您进行“套索选择”时，我的条形变为粉红色。但是，我想将我的标尺与这个“套索选择”结合起来，或者换句话说，我希望一旦我的标尺被拖动，下面的所有都会被选中。我创造了一个小提琴来说明我的问题： http ： //jsfiddle.net/Lge93/ 由于我是Javascript和Jquery的新手，我真的很感激任何解决方案或建议。谢谢你的时间编辑post答案：基于Jtromans提供的代码的最终解决方案可在此处获取： http ： //jsfiddle.net/Lge93/5/

将可排序的数据删除到可排序的（嵌套的div）中: 我创建了一个代码，允许我将div从第1列拖动并克隆到第2列。第2列是可排序的。这很好用，但我现在想将第1列中的div拖到已经放入第2列的div中。到目前为止，这是我的代码： HTML Items Drag me ONE Drag me TWO Drag me THREE Drop here jQuery的： $(‘.dragItem’).draggable({ helper: ‘clone’, connectToSortable: “#column2” }); $(‘.dragItem’).sortable({ containment: “parent” }); $(‘#column2’).sortable({ cancel: ‘#cont>div’, placeholder: “highlight” }); $(‘#column2’).droppable({ accept: ‘.dragItem’, drop: function(event, ui) { var draggable = ui.draggable; var droppable = $(this); var drag = $(‘#column2’).has(ui.draggable).length ? draggable : […]

jQuery UI Draggable：更新拖动事件的包含: 这是可能的：创建一个可拖动元素，以便当它拖过特定的可放置元素时，可拖动元素的包含选项被设置为可放置元素吗？这将产生一种效果，其中在可放置元素上拖动某些东西会导致可拖动元素被锁定/粘附到可放置元素的边界。下面是我的代码的摘录，虽然它无法实现上述效果。 var droppable_position = $(‘#droppable’).position(); $(‘#draggable’).draggable({ helper: ‘clone’, drag: function (event, ui) { if (ui.position.left > droppable_position.left && ui.position.top > droppable_position.top) { $(‘#draggable’).draggable(‘option’, ‘containment’, ‘#droppable’); } } });

如果div已被删除，请禁用drop？: 我已经创建了一个拖放游戏，以便开始自学jquery。一切似乎都在起作用，但你可以将多个项目放在同一个方格上。如果占位符中有图像，我想禁用droppable。我调查过： `greedy: true` 这会禁用掉线，但我不知道如何再次启用它，还有： $(this).droppable( ‘disable’ ); 如果块/图像恢复到原始位置或移动到另一个方块，我可以得到这两个来禁用掉落但不确定如何让它们再次启用它。完整版： http ： //creativelabel.co.uk/drag-and-drop/ 更新：这是可放置插槽的代码。 for ( var i=0; i<=19; i++ ) { var images = 'images/slot' + slotNumbers[i] + '.jpg'; $('’).attr(‘id’, ‘slot’+slotNumbers[i]).data( ‘slotNumbers’, slotNumbers[i] ).appendTo( ‘#imgSlots’ ).droppable( { accept: ‘#images img’, hoverClass: ‘hovered’, drop: handleDropEvent, activate: handleDragEvent }); 这是drop:事件代码： function handleDropEvent( event, ui […]

多个jQuery UI元素的X和Y位置: 我试图使用jQuery UI收集多个可拖动元素的位置。目前我可以获得一个元素的位置，但是当我移动另一个元素时，两个位置都会改变。请有人协助我获取多个可拖动物品的单独位置。 http://codepen.io/anon/pen/nLGIl HTML Test 1 This is a test Test 2 This is a test CSS .dragThis { min-width: 50px; max-width: 300px; min-height: 50px; max-height: 400px; overflow: auto; padding: 10px; background: #efefef; border: 3px solid #ccc; border-radius: 10px; display: inline-block; position: absolute; top: 0px; left: 0px; z-index: 0; } .dragThis h2 { […]