jquery-ui-sortable

问题 I have certain "pages" on my website that are sortable. They also auto update to a database. After my li list is sorted, a php page is called that re-orders the "pages" and then I call .html(data) to change the order of the pages that are displayed on the page. After doing this, however, my auto update functions in my javascript stop working. There is a #form1 that works before the sort takes place and the .html(data) is called. Once it is called, the previous #form1 get's removed and re

问题 I'm trying to load some html in an iframe and make certain elements in that html page sortable: jsfiddle JS: var _iframe = $('iframe'); var containment = _iframe.contents().find( "modules" ); if(containment.data('sortable')) containment.sortable('destroy'); containment.sortable({ stop: function (event, ui) { console.log('STOP: I am never called'); }, start: function (event, ui) { console.log('START: I am called with a delay!'); }, containment: containment, placeholder: "sortable-placeholder",

问题 I would like to implement the following: I have a source container populated with a list of draggable items I have a target sortable container populated with items of the same kind as the source items When I drag/drop an item from source to target, I would like to decide what to do with the draggable (helper clone): insert before item mouse is over replace item mouse is over <-- New requirement! insert after item mouse is over Any help is highly appreciated! Thanks! Example (without the

问题 $('#titles').sortable({ containment: "parent", axis: "y", helper: "clone", tolerance: "pointer", }); .grida{ position:fixed; left:0; top:29px; width:100%; height:calc(100% - 29px); overflow:hidden; display:grid; grid-template-columns:134px auto; grid-gap: 5px; padding:5px; } .titles{ height:calc(100% - 30px); overflow-y:scroll; padding:7px 0; } .title{ margin:2px 0; padding:2px 7px; cursor:cell; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link

问题 Im using JQuery UI, for sortable feature. i'm able to drag from base data list to hierarchy and sortable is working. But if i drag a li item from base data list to text box inside Measure formula the value should be copied. please check the example that i have typed. Thanks JS $(function() { $( "#sortable1" ).sortable({ connectWith: ".connectedSortable", remove: function(event, ui) { ui.item.clone().appendTo('#sortable2'); $(this).sortable('cancel'); } }).disableSelection(); HTML <ul id=

问题 I'm trying to incorporate the jquery sortable functionality into my website and saving the positions in the database is giving me all sorts of headaches... I've been fighting this for 3 days now, and I cannot seem to get this work properly. As it stands, it is saving positions to the database, but not in the order or positions, that you'd expect. Meaning, if I move the item in position 0 to position 1, it saves the positions in a different order in the db. check out a live version here. Here

问题 first of all sorry about my English... Well, I try to create a sortable list of questions/answers and it works perfectly in FF but not in IE. In IE, when I try to sort an answer (second level li) the its question and the same group answers moves together with the selected question in a strange way. Example If you have any idea please let me know. Thanks in advance! 回答1: Add this code as well and it should work $('.answer').mousedown( function(e){ return false; } ); This will stop the bubbling

问题 first of all sorry about my English... Well, I try to create a sortable list of questions/answers and it works perfectly in FF but not in IE. In IE, when I try to sort an answer (second level li) the its question and the same group answers moves together with the selected question in a strange way. Example If you have any idea please let me know. Thanks in advance! 回答1: Add this code as well and it should work $('.answer').mousedown( function(e){ return false; } ); This will stop the bubbling

问题 Here's my attempt at animating jQuery UI Sortable: https://codepen.io/anon/pen/YdMOXE var startIndex, changeIndex, uiHeight; $('ul').sortable({ 'placeholder': 'marker', start: function(e, ui) { startIndex = ui.placeholder.index(); uiHeight = ui.item.outerHeight(true);//get offset incl margin ui.item.nextAll('li:not(.marker)').css({ transform: 'translateY(' +uiHeight+ 'px)' }); ui.placeholder.css({ height: 0, padding: 0 }); }, change: function(e, ui) { changeIndex = ui.placeholder.index(); if

问题 I'm trying to create a tile grid that can be rearranged. The tiles are of different sizes. Here's how far I've gotten. http://jsfiddle.net/psivadasan/dMtRs/ How do I prevent tiles from being rearranged outside the grey area? I don't want this to happen: http://i.imgur.com/0JAfY.png Appreciate any help. 回答1: Just use the containment option: This will stop the elements being dragged outside. $('ul').sortable( "option", "containment", 'parent' ); http://jsfiddle.net/dazefs/dMtRs/7/ 来源： https:/