Tag: jquery ui sortable

jQuery ui排序列表中的可排序项和子项: 如果将任何子元素拖动到任何父元素之外，则会存储其位置。这是一个很大的问题。元素必须返回上一个父级。子元素必须能够在父元素和父元素内移动。父元素必须能够在它们之间移动。问题：如何禁用国外父母拖动子元素？如何让父母拖动吧？现在，如果第一个父级的示例向下拖动到PARENT＃2或PARENT＃3的位置，它将不会移动码： $(document).ready(function(){ var sortable_element = $(‘.sortable’); sortable_element.sortable( { items: “.group-caption, .group-caption .group-item”, handle: “.move”, cursor: “move”, opacity: 0.7, containment: “.sortable”, placeholder: “movable-placeholder”, revert: 300, delay: 150, start: function(e, ui ) { ui.placeholder.height(ui.helper.outerHeight()); } }); }) .sortable { } .group-caption { background: #D3CAAF; width: 400px; display: block; […]

jQuery Sortable（）与原始位置占位符？: 有没有办法让jQuery可排序列表显示一个占位符，当你拖出一个排序时，初始项是什么？即当用户去我的列表中移动其中一个LI时，我想要一个矩形轮廓来显示他们拖动的那个来自哪里。

使用float：left vs display：inline-block进行jQuery UI拖放排序比较: 我这里有两个例子，这两个例子之间的区别只有一个是使用display：inline-block而另一个使用float：left， li.doc_item {display：inline-block;} vs li.doc_item {float：left;} 我的问题是显示：内联块排序不像float：left那样快或响应。我想使用display：inline-block，因为我重新排序的缩略图有时会在大小和浮动方面有所不同：当缩略图的高度和宽度不同时，left不能正常工作。任何问题是如何使块：内联块像浮动一样快：左？你可以在这里找到比较例： http ： //dev-server-2.com/drag-drop-sample/

使用jquery ui可排序插件获取项目的起始位置: 我正在使用jQuery UI可排序插件，我正在尝试获取2个警报我想要元素的凝视位置和元素的完成位置。 $(function() { $(“#filterlist ul”).sortable({ opacity: 0.6, cursor: ‘move’, update: function(event, ui) { alert(ui.item.prevAll().length + 1); } }); }); 我可以通过使用以下方式获取项目的位置： – ui.item.prevAll().length + 1 我用什么来获得它的起始位置？

jQueryUI draggable + sortable bug（无法读取undefined的属性’options’）: 我的问题似乎与这个问题相似：从可排序列表拖动到拖放插件但由于没有给出那个答案，我想知道是否有人能够/能够和我一起解决这个问题。我遇到的问题是我创建了一个可拖动的div并将其附加到一个可以排序的div中。当我指定任何这样的参数时： $(el).sortable({ … arguments … }); 当元素被删除时，它会导致错误，如果留空，它会奇怪地工作正常并且没有问题。该错误还会阻止可拖动元素触发任何函数。 Uncaught TypeError: Cannot read property ‘options’ of undefined jquery-ui-1.10.3.custom.js:2204 $.ui.plugin.add.stop jquery-ui-1.10.3.custom.js:2204 $.extend.plugin.call jquery-ui-1.10.3.custom.js:284 $.widget._trigger jquery-ui-1.10.3.custom.js:2017 (anonymous function) jquery-ui-1.10.3.custom.js:401 $.widget._mouseStop jquery-ui-1.10.3.custom.js:1702 (anonymous function) jquery-ui-1.10.3.custom.js:401 $.widget._mouseUp jquery-ui-1.10.3.custom.js:957 (anonymous function) jquery-ui-1.10.3.custom.js:401 $.widget._mouseUp jquery-ui-1.10.3.custom.js:1721 (anonymous function) jquery-ui-1.10.3.custom.js:401 $.widget._mouseDown._mouseUpDelegate jquery-ui-1.10.3.custom.js:913 jQuery.event.dispatch jquery-1.10.2.js:5095 jQuery.event.add.elemData.handle jquery-1.10.2.js:4766 这是出错的代码： $.ui.plugin.add(“draggable”, “cursor”, { […]

如果list在init之前为空，则jQuery sortable与水平列表无法正常工作: 如果我在初始化之后将元素添加到列表.sortable它无法正常工作。参见示例jsFiddle 示例HTML： add 示例JS： $(“.container”).sortable({ containment: ‘parent’ }); $(“.container”).disableSelection(); $(“.add-fields”).click(function(){ $(“.container”).append(“sucke”) }) CSS示例： .container { height: 30px; width: 100%; background: blue; position: relative; float: left; } .container > div { position: relative; float: left; height: 100%; width: 80px; background-color: red; line-height: 30px; text-align: center; margin: 0; padding: 0; cursor: default; } UPDATE 我在http://bugs.jqueryui.com/ticket/7498找到了相关问题因为this.floating仅在_create中确定，如果从空的sortable开始，则假定它是垂直的。

Jquery draggable / droppable和sortable组合: 我被要求创建一个正方形网格，其中每个正方形可能包含或不包含链接，这些链接应该能够围绕网格移动。我认为draggable / droppable将是可行的方式并且它可以正常工作，但是，现在我们希望能够让draggables交换，如果一个被丢弃在另一个之上。所以它现在看起来像是可以排序的。但是，sortable看起来更像是列表的意思，而我没有像列表那样编写它。有没有一种简单的方法来制作我到目前为止所做的工作，或者我是否需要使用可排序的方式完全重写它？我是javascript的新手，我花了一段时间才能做到这一点，而且我不是要求代码，但我担心必须重新计算整个事情！任何意见？这是我的代码的小提琴： http ： //jsfiddle.net/kvVkT/ 和代码： HTML 1 2 3 4 CSS #gridcontainer{position:relative;padding:25px;color:#ff0004;background:#ffffff;} .droppable{width:65px; height:65px;float:left; margin:5px;background:#000000;} .bookmark {float:left;width:65px; height:65px;display:block;position:absolute;} .position{float:left;width:65px; height:65px;display:block;} .position:hover{background-image:url(../img/tilehover.png);} .bookmark.ui-draggable-dragging {-moz-box-shadow: 0 0 5px #d9d9d9; -webkit-box-shadow: 0 0 5px #d9d9d9; box-shadow: 0 0 5px #d9d9d9;} .draggable{ background:#888888;} [draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: […]

Jquery Sortable，通过拖出删除当前项: 我的问题：可排序的事件：当我在列表中拖动某些内容或对列表进行排序时触发。但我只想在拖出项目时启动该function。我的代码 $(document).ready(function ust() { $(‘#div1’).sortable({ out: function(event, ui) { $(‘#nfo’).append(‘OUT’); } }); }); 工作示例http://jsfiddle.net/FrbW8/22/

可排序的克隆助手无法正常工作: 也许我不明白克隆如何与可排序一起工作，但这是我想做的。在排序项目时，我想要拖动项目的克隆，直到我停止将项目放在新位置。这是代码： .sort { width: 150px; } .ui-state-highlight { background-color: #000; height:2px; } Item 1 Item 2 Item 3 Item 4 $(function() { $(‘.sort’).sortable({ helper: ‘clone’, placeholder: ‘ui-state-highlight’, opacity: ‘.5’ }) }) 在此先感谢您的帮助！

JQuery UI：取消Droppable Drop可排序: 我正在使用JQuery 1.5.1和JQuery UI 1.8.11。我已经添加了一些项目的可排序 – 这里的任务是允许拖动排序，这一切都很好。但我也希望合并droppable，以便可以将项目放到“复制我”区域 – 任务将复制项目（我稍后会工作）问题是可放置目标位于可排序列表的底部（我不想移动它），一旦发生丢弃，可排序项目就会移动到列表的底部。我想要做的是在drop事件触发时取消此类。你可以在这里看到我的问题（只需将“Item 1”拖到“Drop to Copy Item”区域，你就会看到排序没有被取消）正如您所看到的，我在droppable“drop”事件中尝试了以下内容（从JQuery UI Docs建议），但它似乎不起作用…… $(this).sortable(‘cancel’); 我也对如何实现我正在寻找的“复制”效果的任何其他建议持开放态度。谢谢