OK, I'm probably missing something obvious here, but my searches aren't turning up anything helpful. I've set up a sortable list and connected a draggable "palette list" to it, as explained here: http://jqueryui.com/demos/draggable/#sortable I can drag items from my draggable list and drop them on my sortable list. That works fine. I...
Hi all This question is all over SO, but no one seems to have had the same problem as I have. When I do something like this $(function(){ $('#unique-ul').sortable({items:'li'}); }); I'd expect it to "just work". By and large, it does. I can drag any <li> from any list to any other list, and any sublist of that <li> is dragged wi...
I've implemented JQuery sortable, and it works fine. The problem is I can't pass the list in its new order to a controller so i can save it. <script type="text/javascript"> $(document).ready(function() { $("#sortable").sortable({ axis: "y" }); }); $(function() { $("#submit-list").button(); ...
i'm building a portlet style site with tabs using jquery 1.4.2, and jquery ui 1.8.2. the portlets were easy to get working with the sortable plugin. tabs were easy as well. the problem i'm having is in trying to drag portlets BETWEEN tabs. since the same containers that the portlets are sortable to (columns) are present in all tabs, ...
Hello! jQueryUI has got a nice plugin, Sortable: http://jqueryui.com/demos/sortable/ I'm very pleased with that plugin but I'm only missing one thing. And that is instead of let the elements that changes position pop/jump to its new position, I'd like them to "slide" to that new position instead. By other words, make it a bit more smoot...
I'm using Highcharts (which are JS based charts) in conjunction with jQuery Sortable. Each chart is rendered within an <li> and sortable on the parent <ul> allows me to move them around. This works great in Firefox and Chrome. In IE7, however, I get extremely weird behavior: The dragging works fine, but as soon as I drop it, the chart ...
Hi peeps, Little help need with jquery sortable. I have a nested list like so: <div id="tree"> <ul> <li class="n-1">root <ul> <li class="n-2">Academic <ul> <li class="n-5">Staff</li> <li class="n-6">Courses</li> </ul> </li> ...
I want to create draggable and sortable effect like that of http://www.bbc.co.uk/. For that I used Jquery UI and got kinda same effect. But with complications, if you see the effect in BBC's website, when you pick a division there appears a shadow with a dotted line below it and the shifting between the boxes is pretty much different t...
Hi, Here is my code: $(".myclass").bind( "sortstart", function(event, ui) { $('#div_1').sortable('destroy'); $("#div_1 .li_1").droppable( { hoverClass: 'red', drop: function(event, ui) { $(this).addClass('red'); } }); }); Can anyone help me identify what is wrong? Kind regar...
Hi! I hope someone can help me. My Problem: I have 2 sortable UL's. <ul id="k1"> and <ul id="k2"> When i drag a li from k2 into k1, the k2 ul collapse (coz there is one li missing now). Is it possible to say -> When draggable start, insert a non draggable clone into the k2? and If drag successful -> Put LI into k1 if not -> Put L...
Good morning, i hope someone can help me. My Problem: The sortable event out: fires when i drag something in the list or when i sort the list. But i only want to start the function when i drag a item out. My code $(document).ready(function ust() { $('#div1').sortable({ out: function(eve...
I have a page with ten sortable lists that properly save the order of list items(divs) as they are moved inside their list. Each list itself is generated with a separate php file that basically iterates content based on its boxid #. So all content with a boxid of 5 gets output to list 5. All content with boxid of 3 gets output to list 3 ...
Hi, I need to modify the element when as soon as it starts being dragged. The 'start' callback takes two arguments, only the first of them seems to be usable for me. The deal is that I'm using helper: 'clone' which makes event.originalTarget to point only the "original" element, not the new one (which is in fact the one being dragged). ...
in my code here http://jsfiddle.net/ebSf4/ you can drag from one sortable column to the other. I am adding some animation to sortable's receive event to make the dropped element animate to the size needed in it's new position. This is working great except the receive event fires late the first time you move a given element. The elemen...
Hi all, is it possible to disable onlick="" while sorting? i created a working example here -> http://www.jsfiddle.net/V9Euk/59/ greetz from germany Peter ...
Hi, i have a problem with the revert speed. Here is a working example http://www.jsfiddle.net/V9Euk/94/ <-- updated Change something in the sortable list ... the speed is fast (revert 100). But when you drop the "four" into the sortable list, the speed is slow. But why? oO kind reagards Peter ...
The notes on UI Sortable 'serialize' says it creates a passable array based on the ID of the sortable list. You're supposed to use an ID with a name and underscore "foo_" and it creates an array -> foo[1], foo[2], etc. However, it does not work. I'm getting a result that looks like this: '[] = foo_1, [] = foo_2, etc. Has anyone else had ...
Hi, In the code below the update function gets called twice when an item is moved from list sortable1 to sortable2 .. though i need to call that function only once. $("#sortable1 tbody, #sortable2 tbody").sortable({ connectWith: '.connectedSortable tbody', helper: fixHelper, handle : '.handle', update : function () { ...
I have 9 boxes (div) on a page. I am able to move them to different positions, in a grid like fashion. So the basic sortable functionality is fine =) But I have a couple of questions: What if my boxes vary in width? Which they can do, if one changes the width (1/3, 2/3 and 3/3). Can I still have one 2/3 box and a 1/3 box on the same ...
I have 9 floating boxes on a page with 3 columns, generated from this JQ script: <script type="text/javascript"> $(function() { $("ul.connectedSortable").sortable({handle:'.kpiValueContainer', connectWith:'trysomethingelse', placeholder:'ui-state-highlight', revert: true}); }); </script> The columns are in fact "ul"...