Tag: jquery ui sortable

ondrop事件 – 创建新元素: 我使用jquery的可排序function。请检查图像，如果我从基础数据拖动项目并将其放在filter中，我需要在Texfields列上创建一个文本框。我不想预先填充所有filter和文本字段。所以，如果我可以将项目从我需要的基础数据拖放到filter。应为每个drop创建一个文本框.. 请帮忙！！！我的代码HTML Base Data Item 1 Item 1 Item 1 Filters Textfields Hierarchy Item 3 Item 3 Item 3 Item 3 CSS body.dragging, body.dragging * { cursor: move !important; } .dragged { position: absolute; top: 0; opacity: 0.5; z-index: 2000; } ol.vertical { margin: 0 0 9px 0; min-height: […]

使用jQuery对存储在变量中的Div元素进行排序: 我有一个存储在变量中的HTML dom元素。 HTML是使用jQuery从handlebar.js和JSON数据生成的。我需要根据CSV中的值对其进行排序 var html = “Qual Exp Edu Int Ref Img Obj”; HTML通常很复杂，通常超过200行代码。 html将有很多div标签，有或没有id，嵌套div等。我在这里使用一个简单的表示法。我在一个varibale中将sortorder作为csv var sortorder = “obj,exp,qual,edu,int,ref,img”; 但是带有上述id的div标签将完全存在于生成的HTML中（var html肯定会有所有那些具有相应id的div。）为了保持简单，var html可能有超过100个div但是这7个div是 Qual Exp Edu Int Ref Img Obj/div> 根据var sortorder将defuffly存在于var html中的一些shuffled顺序。我需要的是相同的var html，但那些div根据传递的值排序。 var html中的其他div不应该受到影响。我想我已经足够简短地解释了我的要求，我已经发布了这个问题如何使用jQuery从CSV列表中根据id对div元素进行排序？但这种方法并不是一直都在运作。

jquery可排序和可放置 – 无法附加放置项？: 我想将已删除的项目附加到可排序列表中的目标可放置框中，但我无法将放置的项目附加到特定元素中。我的jquery， $(“.sortable”).sortable({ update: function(){ // php update. } }).disableSelection(); $( “.droppable” ).droppable({ activeClass: “ui-state-hover”, hoverClass: “ui-state-active”, drop: function( event, ui ) { var targetElem = $(this).attr(“id”); $( this ) .addClass( “ui-state-highlight” ) .find( “p” ) .html( “Dropped! inside ” + targetElem ); alert(targetElem); var container = $( this ).find( “ul.dropped-items” ).css({border:”blue solid 1px”}); container.append(ui.draggable.clone()); […]

嵌套的可排序元素，锁定深度: 我很难试图“锁定”嵌套可排序元素的深度，因此他们只能在他们的直接兄弟姐妹中“上下”排序。我以为我有这个，但我仍然可以从他们的父母那里’拉出’儿童用品，反之亦然。 var $sort = $( ‘#outside-wrapper’ ).sortable({ axis : ‘y’, items : ‘.item’, start : function( event, ui ) { // dynamically set the containment to the item’s direct parent once started $sort.sortable( ‘option’, ‘containment’, ui.item[0].parentNode ); } }); 这是标记要求的一个例子; 感谢任何指针！

Jquery – 使用现有元素序列化drop和down组: 更新：我改变了jsfiddle。我确定该元素必须加载javascript / jquery才能获得jquery行为。 javascript寡妇的底部包含existing_js var，我认为应该用它来插入元素。它被附加到适当的区域（#drop-area），但它仍然无法排序或能够将“字段”放入其中。 jsfiddle链接已更改为此新版本。我有一个拖放序列化列表。我拖着它进入我的“工作区”。我刚在工作区添加了一个预加载的元素（“fieldset”）。当我对工作区中的元素进行排序时，控制台日志会显示序列化的可排序数据。现在，当我查看控制台日志（js窗口中的第118行）时，现有元素未列在序列化数据中。我确定我必须以某种方式注册，但我不确定如何。 JSfiddle链接如下。要重新创建该问题，请查看开发人员工具中的控制台日志。将左侧菜单“Form Structure”下的任何元素拖到“Working Area”中。拖放元素时（通过右上角的句柄），它会创建序列化数据的控制台日志。它不考虑预先存在的可排序元素。谢谢你看着它。 JSFiddle在这里！ $(function() { $(‘#accordion’).find(‘.accordion-toggle’).click(function(){ //Expand or collapse this panel $(this).next().slideToggle(‘slow’); //Hide the other panels // $(“.accordion-content”).not($(this).next()).slideUp(‘slow’); }); function randomString(length, chars) { var result = ”; for (var i = length; i > 0; […]

jQuery UI sortable：如何从连接列表中排除项目？: 我有两个连接的列表（左/右coloumn），所以我可以将项目从一列（左）拖放到另一列（右）。如何保留list1（左）中不应拖放到list2（右）的特定项目，同时保留将它们拖放到源列表中的function ？小提琴： http ： //goo.gl/7ZKfrl

如何从jquery可排序连接列表中删除重复项？: 这是我的jquery可排序代码。我想在拖动其中的元素后从sortable2和sortable3中删除重复项。我尝试了很多方法，但我失败了。请给我一个完整的工作代码，以便我可以在我的脚本上实现它。 jQuery UI Sortable – Connect lists #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; width: 200px; height: 200px; border: solid 1px black; } #sortable1 li, #sortable2 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } $(function […]

JqueryUI sortable因滚动而失败: 我在我的应用程序中使用jqueryUI sortable所以我有以下问题：的jsfiddle 当您点击滚动条sortable项目时，您可以在此小提琴上看到，并且无法删除它。我想要做的是在滚动时阻止拖动元素。我刚刚做的是搜索可排序元素的事件，并尝试阻止滚动但这不能按我的意愿工作。任何帮助，将不胜感激。

在jQuery .html（）更新中，其他function停止工作: 我的网站上有一些可以排序的“页面”。它们还会自动更新到数据库。在我的li列表被排序之后，调用一个php页面来重新排序“pages”然后我调用.html(data)来改变页面上显示的页面的顺序。但是，执行此操作后，我的自动更新function在我的javascript停止工作。有一个#form1在排序发生之前工作，并调用.html(data) 。一旦调用，之前的#form1 get被删除并重新添加到页面中。这是它停止工作的时候。有谁知道这个的原因？我的更新脚本 $(“#reportNav”).sortable({ stop : function(event, ui){ var postData = $(this).sortable(‘serialize’); var url = “saveOrder.php”; $.ajax({ type: “POST”, url: url, data: postData, success: function(data) { $(‘#reportContainer’).html(data); }, error: function(data) { $changesSaved.text(“Could not re-order pages.”); } }); } }); 什么停止工作/停止被调用 var timeoutId; $(‘#form1’).on(‘input propertychange change’, function() { […]

jQuery UI：可排序和可拖动+可排序和可放置: 我有两个清单。它们是可排序的但没有连接（列表“one”的元素不能与列表“two”的元素混合）我希望列表“one”的元素可以删除，列表“two”的元素可以拖动，因为我想将列表“two”的元素拖放到列表“one”中。我应该怎么做？编辑：我试图让问题尽可能一般，但也许我应该更清楚……对不起。列表一的元素是“类别”，它们应该是可排序的。列表2的元素是“链接”，应该是可排序的。链接只属于一个类别。我想将一个链接从一个categerory移动到另一个，我很想使用JQuery Ui。