Tag: jquery ui sortable

未捕获的TypeError对象没有’sortable’方法: 我已经找到了一些针对这个问题的修复程序，但它们并不具体。我读过Sortable（）等简单的东西需要小写。当然，我没有先将它设置为大写。我已经有了这个工作，然后它突然决定在控制台中吐出以下内容Uncaught TypeError: Object [object Object] has no method ‘sortable’在线：210对应于： // 210行在下面 $（ ‘排序’）。排序（{ 停止：get_post_order }）disableSelection（）; //检查新订单 function get_post_order（）{ var post_list = []，pids; $（’。inner-pop-list li a’）。each（function（）{ pids = $（this）.attr（’rel’）; post_list.push器（PID）; }）; $（’。export’）。attr（’href’，’？format = pdf＆pids =’+ post_list）; } 它应该在重新排序列表后更新post_list数组。 get_post_order根本没有运行。我已经尝试将函数直接添加到stop: function() {…}但仍然没有变化。任何想法，我都很难过。谢谢

从Jquery UI中删除项目可排序: 我正在尝试找出从JQuery UI可排序列表中删除项目的正确方法。我创建了一个JSfiddle来说明我的问题。基本上，我有一些围绕JQuery UI可排序窗口小部件的回调，我希望一旦从窗口小部件中删除元素就会执行这些回调。这样做的正确方法是什么？因为“$ .remove”和“$ .detach”似乎都有效。编辑1：我不是在寻找我的问题的修补程序，而是更多关于JQuery UI可排序列表如何工作的解释，而下面的答案清楚地解决了问题。我不认为这是一种干净的方式。我认为JQuery UI Sortable应该知道，当您从列表中删除两个元素之间的元素时，您应该需要重新排序如果你在下面注意，当我在元素上调用remove时，函数不会被执行。 $(document).ready(function(){ $(‘ul’).sortable({ stop: function(event, ui) { updatePosition(); } }); $(‘.remove’).on(‘click’, function(e){ $(“.delete”).remove(); }); }); function updatePosition(){ $(‘ul li’).each(function(i){ $(this).html(i + 1); }); } http://jsfiddle.net/72RTz/2/

使用Sortable / Droppable调用Drop（）两次: 我在这里有这个代码。我有两个问题：在receive函数中，我们如何才能将刚刚放入可排序元素中的元素放入？不是用来放弃一个新的那个，而是那个被放入列表的实际的那个？由于我找不到，我决定使用drop（）函数，但现在，为什么该函数被调用两次？！我不希望这样！ $( “#sortable” ).droppable({ activeClass: “ui-state-default”, hoverClass: “ui-state-hover”, drop: function( event, ui ) { $(ui.draggable).editable(function(value, settings) { return(value); },{ tooltip : “Click to edit” }); } }).sortable({ revert: true, receive: function(event, ui) { $(this).children(“li”).each(function(index) { $(this).attr(“id”, “content-” + index); }); } });

应用CSS3比例时，Sortable行为错误: 我正在使用CSS转换扩展JQuery可排序元素。两个可排序的项目开始位置和偏移，而拖动是错误的，因为JQuery不考虑CSS标度。我用这里的代码部分解决了它： jQuery使用CSS转换比例拖动/resize 但我无法解决的问题是拖动开始时的可排序项目位置。它向上跳了一下。我无法弄清楚要放入启动事件处理程序的内容： start: function(e, ui) { // something is needed here to fix the initial offset } 这个小提琴显示了这个问题： http ： //jsfiddle.net/adrianrosca/zbvLp/4/

jQuery ui sortable – 使用Python / Flask / SQLite保存到数据库: 我需要一个拖放效果，只是找到jQuery sortable最可行和最简单的解决方案，但我想在重新排序后保存位置。使用php / sqlite我可以这样做，但因为我使用框架烧瓶解决方案必须在python中。我来这里搜索代码 HTML： $(function() { var $sortables = $(“#sortMe”).sortable({ stop: function() { var sortedItems = $sortables.sortable(“toArray”); } }); }); 潘岳： app.config[‘SQLALCHEMY_DATABASE_URI’] = ‘sqlite:///db.sqlite’ class Sortable(db.Model): __tablename__ = ‘sortables’ id = db.Column(db.Integer, primary_key=True, autoincrement=True) data = db.Column(db.String) def __init__(self, data): self.data = data @app.route(“/saveorder”, methods=[‘GET’, ‘POST’]) def save_order(): if request.method == “POST”: […]

为什么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）*

将可排序的数据删除到可排序的（嵌套的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排序多个Tbody: 我有这样一张桌子： Department Quantity Data 100 DTP 20 VTP 30 RTP 50 Testing 100 QTP 20 ATP 30 CTP 50 当我点击department标题时， tr内部的数据和测试应该被排序。但数据和测试TH应该保持不变。我不想使用任何jQuery插件。请共享代码来完成此任务。

jquery ui sotable连接列表项容器+ zinxed问题: 我正在使用jquery ui对连接列表进行排序。我有2个问题。 1.Drag Index：当从一个列表中拖动项目时，说A到其他列表说B，项目在拖动时会在列表B后面，但在删除后会正确显示。 2.Container scrolling：当左侧列表中的项目被拖动到右侧时，它不是先显示占位符，而是滚动容器然后出现在其他列表中。 JSFIDDLE ： http ： //jsfiddle.net/bababalcksheep/Cd4Sr/ 类似： http ： //quasipartikel.at/multiselect_next/ HTML： Test1 CSS： .ui-splitselect{font-size:.8em;width:100%!important;text-align:center;margin:0 auto;padding:0} .ui-splitselect ul{-moz-user-select:none} .ui-splitselect .ui-widget-header{border:none;font-size:11px} .ui-splitselect-selected{float:left;border:none;margin:0;padding:0} .ui-splitselect-available{float:left;border-top:none;border-bottom:none;border-right:none;margin:0;padding:0} .ui-splitselect-list{position:relative;overflow:auto;overflow-x:hidden;list-style:none;width:100%;margin:0;padding:0} .ui-splitselect-item{cursor:default;line-height:20px;height:20px;font-size:11px;list-style:none;display:list-item;white-space:nowrap;overflow:hidden;margin:1px;padding:0} .ui-splitselect-item.ui-sortable-helper{z-index:99999} .ui-splitselect-handle-select{float:left} .ui-splitselect-handle-drag{float:left;height:20px;border-top:0;border-bottom:0;cursor:pointer;margin:0 10px 0 5px;padding:2px 5px} .ui-splitselect-handle-move{text-decoration:none;cursor:pointer;float:right;height:20px;border-top:0;border-bottom:0;margin:0 5px 0 10px;padding:2px 5px}

jQuery UI，sortables和带有多个列表的Cookie插件: 我正在使用带有cookie插件的jQuery UI可排序插件来设置并获取两个可排序列表的列表。我找到了这段代码来设置和获取cookie： http ： //www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/#comment-6441 它适用于我想要的一个列表，但不是两个（我已经在注释中列出了更改但在某处失败）。我的猜测是我必须为setSelector指定第一个和第二个列表，而不是为列表使用类。我试过“var setSelector =”＃first，＃second“;但是那不能做到。想法？谢谢 $（function（）{ // set the list selector var setSelector = “.sortable”; // set the cookie name var setCookieName = “listOrder”; // set the cookie expiry time (days): var setCookieExpiry = 7; // function that writes the list order to a cookie function getOrder() […]