Hi all, i'm trying to implement on my page the jQuery UI Sortable plugin, but it isn't working. Can anyone help me with this error? I think it might be something simple that is escaping me. the link to preview is: http://jsbin.com/ebixi3 the link to jsbin edit is: http://jsbin.com/ebixi3/edit Thanks all in advance. ...
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"...
I have a list structured like below: <ul class='binder'> <li value='7'>Welcome <ul class='section'> <li value='7'>Introduction <ul class='subsection'> <li value='4'>About Us <ul class='node'> <li value='11'>2</span> <ul class='element'> <li value = '8' class='paragraph'>Test Paragraph</li></ul> <li value='10' id='node_10'>1 <ul ...
I an using jQuery to create connected sortable lists to create a main menu for a website. The left hand list contains available pages and the right hand list contains the current menu structure. I am using placeholders to highlight the location where the user needs to drop the item. At the moment the user can add an item from the left l...
Hello everyone! I'm trying to make a very simple grid plugin myself. My problem starts when I want to allow the user to change the columns order (not sort the table rows, change, e.g. the first column to show at the all right of the table). I'm using jQuery UI sortable but I found out that when the user starts dragging a th, jquery ui a...
Imagine ul-li grid (like in sample "Display as Grid"). a b c d e f Now you change f -> b. What you see in a list: a f b c d e What I need is instead: a f c d e b Do you know helpers or options to do this? ...
Hi, i am having sortable list between tabs (jquery ui) that works fine My problem is that when the list move to other tab it adds the width and height Original Item : <li>Item 1</li> Item after move to other tab <li style="display: list-item; height: 17px; width: 120px;">Item 1</li> Is there any way to prevent this. ...
I have a situation whereby I have a series of connected sortable lists, and a list can have no more than 2 items at any one time. Therefore I need to somehow disable the "full" list, but still allow an item to be dragged away from it. // If this list has two items, disable it, otherwise enable it if ($('li', this).size()==2) { $(th...
I'd like to be able to group items in a sortable list. If I group two items, then those two should be dragged together and be put inside a container that I can style. Those items inside that group should be able to be dragged as well inside the group, but that's just a bonus :) Does anyone know if this is "possible" jQueryUI Sortables?...
I am trying to get JQuery Sortable to work but I have run into a slight usability problem. The list that I am trying to sort is quite large (about 200 items). If the user tries to drag the top item right to the bottom, once the item reaches the bottom of the visible part of the screen, the page scrolls a tiny amount, then stops. To ...
Hi there, I have sortable, draggable and click events binded to the same DOM element. On sorting, I want the click event to be disabled. I am using the following code for draggable, which works fine: $('.selector').draggable({ start: function(event, ui) { ui.helper.bind('click.prevent', function(event) { event.preven...
Hi there, I have been working with jquery-ui's sortable demo for a while. On looking closely, I found that it nudges the divs slightly. Here's an online demo : http://jsbin.com/ijusu3 Try moving the the center one to the left, then you can see the right ones nudging about 2 pixels to the left. I would like to know why. This has bee...
I'm still a bit new on jquery selection syntax (and jquery in general). I'm not exactly sure how to get this call to work. I'm using a function that gives me an event and ui. I'm using the stop event in sortable and I'm trying to get the nth-child (first) from this element and then trying to clear it's class. right now I have: stop : ...
I have a list with floated thumbnails. See http://jsfiddle.net/Y2ER7/8/ (Don't mind the favorites feature) When I use placeholder and forcePlaceholderSize, I get strange styling behavior. Can you tell me why? EDIT: okay I just found out.. I used a border (outside) for my placeholder class, which caused the thumbnails to squeeze out th...
I have two examples here, only difference between these two example are one uses display:inline-block and other one uses float:left, li.doc_item{display:inline-block;} vs li.doc_item{float:left;} My problem is display:inline-block sorting is not as fast or responsive as float:left. I want to use display:inline-block because thumbnail...
I have two lists, I want both of them to be sortable and want to be able to copy (drag) items from list1 to list2 and vice versa. http://jqueryui.com/demos/sortable/#connect-lists Is what I want, but the items are moved, not copied. I did a few experiments with draggables and droppables, but I can't get to to work keeping them sortable...
Im using jQuery UI sortable on a table. My javascript: $("#linksSortable tbody").sortable({ handle : '.handle', //helper : fixHelper, update : function () { var order = $('#linksSortable').sortable('serialize'); //$("#info").load("ajaxtest.php?"+order); alert(order); } }); My table: <ta...
I have two connected sortable lists. For the sake of my question, when I start dragging an item from #sortable1 to #sortable2, in the start event I want to cancel/ disable/ the drop in #sortable2 Nothing works? $("#sortable1, #sortable2").sortable({ connectWith: "#sortable1, #sortable2", start: startDrag }); function startDra...
Background Let me start off by listing my opinion of jQuery: I've been anti-jQuery for the longest time I think it does have its uses and parts of its code can be reused I feel if you're against something, you should know what you're "against" I've created a number of examples and compared that to ways I've done things in the pa...
Hi, I have a number of ul's which the user is able to sort li's into. I have 2 different types of li and need to restrict which list they can be dropped into. Here is a small example: <ul class="top"> <li class=typeA">Item</li> <li class=typeA">Item</li> <li class=typeB">Item</li> <ul class="sub"> <li ...