johnny / jquery-sortable Goto Github PK

Example:
http://jsfiddle.net/rQ6E3/

I can't drag first element of the first list into begin of the second list, because of actual height of first list is more than visible height. Is there any way to fix it?

Hi,

thank's for the plugin. It's awesome!

I just found one minor bug:
If you disable sorting of a list using .sortable('disable') BEFORE you change it's order, everything is ok, but if you change it's order first and THEN you disable it, nested lists don't seem to be fully disabled. This means they cannot be sorted, but if you try to do it, the arrow and the placeholder still show up.

One can reproduce this issue easily even on the plugin's webpage using the 'Toggable nested lists' example.

Tested on Firefox 22.0.

Hope this helps,
Michael

Hey guys, I implemented the red Drop Cursor like this:

<li class='placeholder' height:"0px" width:"0px"><span class="placeHover">></span></li>

But, the dragging and dropping is really sporadic and jumpy. I was wondering how it was implemented in this example (which is simply amazing looking!).

Thanks again!

Hi

Is it possible to drag items between nested containers?
The ul/ol examples demonstrates this, but when the html structure is built with div elements I can not drag an item from a parent container to a child container or maybe I am missing something

See this fiddle:
http://jsfiddle.net/5hd2M/

Thanks in advance,
Thomas Andersen

Hi Johnny,

When dragging elements it's hard to position them in between two nested lists. As seen in this Fiddle: http://jsfiddle.net/AWNaB/.

The only way to do it now is by moving the mouse all the way to the left and out of the parent ol. Is there a way to do this without having to move the mouse to the left?

I know that setting "pullPlaceholder: false" does fix this issue. But doing that breaks dropping items in empty lists. Unfortunately I need both...

The documentation on the default serialization is not clear enough.

1. Add normal serialization example
2. Improve docs
3. Fix bug as demonstrated here http://jsfiddle.net/shankardevy/XwkxH/2/ (first found in #37). The subContainer field should not be present. (Firefox)

Hi !

Thx for the great plugin ! It should do exactly what I want :-)

I tried the "getting started" example (http://johnny.github.io/jquery-sortable/)

Here's what I have : http://jsfiddle.net/3ncWm/ .

works well ! was a bit quick to fire this issue !

maybe because of references to window and document?

I have following questions.Kindly help me find answers.

1. Is it possible to define an item property in a list in such a way that it can have nested items but it itself can not be a nested element.it is always at root index.
2. Can we collapse/expand a nested list item ? + expands it and - collapses it.
3. can we problematically move item from linked lists? lets say by double clicking it , it drops its self to end of connected list ?
4. If problematically it is possible to trigger drap n drop, how will be able to move item from one list to other with specific index/position ? i.e, move to top or end of connected list ?

Some of the alternatives that you noted (e.g. http://mjsarfatti.com/sandbox/nestedSortable/) and others you didn't (e.g. http://dbushell.github.com/Nestable/) include functionality that outputs the values of the nested lists in plain text form.

I'm trying to use your tool for developing a drag-and-drop HTML editor for elementary students, and while the interface you developed is the best out of the tools I've researched (by providing the functionality to clone dragged elements and nest them within boxes, which visually highlights the conceptual way in which elements are nested), this is the only feature that I'm struggling to figure out to extract from what you've developed.

You seem to have clear goals about what you are and are not trying to provide with this tool, so I just wanted to ask if serializing output was on your agenda.

Is there currently a way to manually trigger the sortable to execute it's onDrop method?

When the list is longer the height of it's parent div, the draggable is not able to go the droppable elements that can be viewed only by scrolling down. Can a small fix be possible for it that I can add in onDrag function ?

Is it possible to apply tolerance to drag able items so they wont start dragging util mouse has moved away certain pixels?

http://jsfiddle.net/shankardevy/XwkxH/2/

See jsfiddle above for what I did. I'm trying to sort a list of ol and want to get the new order of the list. List is flat. Not sure if this is a bug or I did something wrong. Please can anyone shed some light?

Right now the plug in becomes unusable by tablets or smartphones as touch events do not have any effect.
What about adding something like this:
http://touchpunch.furf.com/
?

(That is for JQuery UI)

Thanks

From what I can tell, it looks like you can't create a new level by dropping an item onto another item. Nested lists have to exits already. Is this true?

I have created sortable list like in example:

1. Start

       </li>
       <li>
         End
         <ol></ol>
       </li>
       <li>
         Third
         <ol>
           <li>First to move</li>
           <li>Second</li>
           <li>
             Third
             <ol>
               <li>First</li>
               <li>Second</li>
             </ol>
             <ol>
               <li>First</li>
               <li>Second</li>
             </ol>
           </li>
         </ol>
       </li>
       <li>Fourth</li>
       <li>Fifth</li>
       <li>Sixth</li>
     </ol>
   

   Then I wrote such jQuery code:

   $(function(){
   $("ol.draggable").sortable({
   onDrop: function ($item, container, _super) {

                    dataToSend = $("ol.draggable").sortable("serialize").get();
                    _super($item, container);
   
                    $.post( "/update.php", { name: dataToSend } ).done(function( data ) {
                           alert( "Data Loaded: " + data );
                    }); 
   
               }
   
           })
       })
   

   If I move "First to move" between "start" and "end" or inside "start" I got such javascript error in my console:
   Cannot call method 'css' of undefined jquery-sortable.js:77
   The element is droped but the post action is not executed.

   Any idea?

I noticed that attr is being used once in jquery-sortable, and the recent updates to jQuery have phased out certain references to attr() in favor of prop(). So far as I can tell jquery-sortable is still working fine, but it might be worth exploring changing that over.

http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-

I've replicated my scenario in this JsFiddle:

http://jsfiddle.net/hE8pD/2/

As you can see, you can only drag a child to a parent but you cannot drag a sibling to another sibling's children.

Am I doing something wrong?

Also, when I move items the items are not placed in the container's containerPath. Instead they are put in the top level element of the container (see example JsFiddle).

jquery-sortable mostly works well in IE7. While I understand that this is quite an old version of IE, unfortunately some networks force the browser to run in compatibility mode (for whatever the reason) and this is where the problems occur.

For my needs, mostly everything is being met, but I am encountering one issue that relates to IE7 only.

I have a list with two items, which I will refer to as root items. The root items have a unique ID or class, with the nesting option set to false. I can now only sort these two items with each other, or any other items of the same level.

Under each of these two root items, I have additional lists and sublists, sharing the same classes. Sorting allows me to move items from each of these lists, while the root items sort among only each other.

This allows me to move around all the children of the roots, treating the roots as individual categories that I can sort as well. This works fine in Firefox and in Chrome.

For some reason, with IE7, the root items become unmovable, but the children are still sortable among each other. I cannot figure out why the root items stop working only in IE7 (or compatibility mode). Everything would be perfect if I could only figure out this one issue.

Having e.preventDefault in dragInit prevents any other stuff from working if the 'mousedown' event is needed for something else on the sortable items. Maybe there should be some extra option for this or remove e.preventDefault ?

I am trying to have a placeholder height of 20 pixels which is the same size as the li items that are being sorted. This is to provide the visual cue of where the item can be dropped into instead of the red arrow you have in your documentation. When the placeholder has a height, the target area for the drop is changing at unexpected times. Is there a way to make it switch whenever you are past the vertical halfway point of the nearest element?

Hi, I downloaded version 0.9.9 to use in my site. First of all, thanks for the good work!

Now, on to the problem. I used your plugin to setup a sortable table using the example (table.js), but the insertion pointer didn't work properly, going always to the end of the table. Lurking in the code I found that in getItemDimensions function the $getChildren call returned an empty array. It seems to me that when you have a table-tbody-tr .... arrangement $getChildren tries to get 'tr' elements immediately under the 'table' element (as pointed to by the 'el' property in the first argument to the function). In the plugin setup (as indicated by the example) I set the 'containerSelector' option to a 'tbody' tag, so I substituted this.option.containerSelector to this.el as first argument to $getChildren and now all works like a charm!

It's ok for my needs, surely you will investigate better into this issue (if you think this is the case).

Thanks again,
Sergio La Marca
Italy

PS: Maybe a duplicate issue? I read the closed issues after writing this message :(

Hii... thanks ur js seem like the best solution for my nested list... but as im not to familiar in javascript can u give us a clue or code example to process the sortable with PHP on AJAX way...

by the way... thanks bro...

Check this out: http://jsfiddle.net/pAX4N/2/

Simple examle. So Drag item 1, then scroll down and see what came out.

I made little fix but it's not beautiful:

line 257:

      this.options.onDrag(this.item,
                          getRelativePosition({ 
                                               left: this.pointer.left + $(this.options.scrollableContainer).scrollLeft(),
                                               top: this.pointer.top + $(this.options.scrollableContainer).scrollTop()
                                              },
                                              this.item.offsetParent()),
                          groupDefaults.onDrag)

and line 393:

(event == 'scroll' && that.options.scrollableContainer ? $(that.options.scrollableContainer) : that.$document)[method](eventNames[event], that[event + 'Proxy'])

this adds option scrollableContainer (because i need it in my project) but it can be done without it

Is it possible to implement a clone of the element (at 50% opacity) being dragged as the placeholder?

The following code is not working correctly:

// sort tables
$('.sorted-table').sortable({
    containerSelector: 'tbody',
    itemSelector: 'tr',
    placeholder: '<tr class="placeholder"/>',
    onDrop: function($item) {
        console.log($(item).html());
    }
});

The dragged TR won't drop on it's new place nor disappear. Instead it keeps glitched over the table. But if I remove the onDrop callback, then it works. Tested on FF, Chrome in Mac OS.

Can i get the drop target in the onDrop handler. I want to determine the drop target is droppable or not programmetically.

I am playing with sortables and cannot work out how to send the parent ids, children ids and positions to a php file so I can update a database table.
php Im fine on but fall flat on my face with java :-s
Any pointers, help or examples available?

The plugin is assuming either mouse our touch events handling here.
This is problematic in the case of computers having touchscreen (either external or built-in).

Instead of opting one or the other, touch events should be subscribed additionally to the mouse events if they're supported.

Is it possible to cancel a drop if it's not required.

I'm trying to do it by taking a copy of the object onDrag, then onDrop check if the item is in the right place (in my case, I only want certain items to be in the root ul, and not nested).

Is it possible to stop a drop happening and reset the item that's dragged ?

When my html look like

<li><a href="http://google.com">Menu</a></li>

So page redirect to the link as clicking.

I tied to add return false; in onDragStart and It's doesn't work..

I didn't see a way to drop\add a child to an item that doesn't have any children

I have setup a table example at http://jsfiddle.net/bababalcksheep/hnHXc/
I have following objectives which i cant figure out how to do ?

1. On Drop I am unable to get serialize data in nice array format ..can you point out what i am doing wrong
2. Sorting should be triggered by click n drag on First column of every row instead.
   I am using move icon on first column, sortable should be triggered only when this icon is clicked instead of whole row drag n drop
3. Is it possible to show blank place space holder in table where red arrows appears while dragging ?

Any help will be much appreciated.

How to disable drag and drop of particular nested list. Also, how to disable drag of particular item. Thank you.

Hey Johnny,

Thanks for the rocking plugin. I was trying to order dynamically added elements and it doesn't work. Gives an error - $item is undefined.

Any clue on how can I accomplish this?

Below is my code

        $("ul.order_list").sortable({
            handle: '.grab',
            onDragStart: function ($item, container, _super) {
                var offset = $item.offset(),
                pointer = container.rootGroup.pointer
                adjustment = {
                    left: pointer.left - offset.left,
                    top: pointer.top - offset.top
                }
                _super($item, container)
            },
            onDrag: function ($item, position) {
                $item.css({
                    left: position.left - adjustment.left,
                    top: position.top - adjustment.top
                })
            }, 
            onDrop: function ($item, container, _super) {
                $item.removeClass("dragged").removeAttr("style");
                $("body").removeClass("dragging");
                newOrder = $("ul.order_list").sortable("serialize").get();
                postPhotoListOrder(newOrder);                    
            }
        });

Thanks a lot mate!

in my work there has to area A and B , A has some dragable elements, but A don't accept drop action, B has some elements too, but the elements in area B can drag and drop any where but cant drop to area A. when i refresh the area B twice ,via ajax the elements in area A cant't be drag to area B , the elements in area B can't do and drag and drop job (only work in first time);

here is the area A code:

$(function(){
        $(".ext_list").sortable({
            group: 'ext-drop',
            drop: false,
            onDragStart: function (item, container, _super) {
                console.log(container, container.options);
                // Duplicate items of the no drop area
                if(!container.options.drop)
                {
                    if(container.el.hasClass('ext_list'))
                    return false;
                    item.clone().insertAfter(item)
                }
                _super(item)
            }
        });
    });

here is the area B code which load via AJAX:

$(".group_wrap .position_extension_list").each(function(){
            $(this).sortable({
                group: 'ext-drop',
                handle: 'i.icon-move'
            });
        });

Hi there.

I run into a problem when using the plugin with bootstrap's affix.

The plugin worked properly at the top of the page, but when scrolling it went crazy. If pullPlaceholder was set to false the placeholder would not be created properly and be undefined throwing an error and if it was true then the placeholder would always stay at the bottom of the list.

After a lot of time understanding the code and debugging to see where may the problem be, I got here:
https://github.com/johnny/jquery-sortable/blob/master/source/js/jquery-sortable.js#L434

This made recovering the offset element on the list to be the HTML tag when the ul was fixed

By adding:

      if(el.css("position") === "relative" || el.css("position") === "absolute" || el.css("position") === "fixed")

... everything is fixed.

I would love to fork and pull but I'm not familiar with the ruby toolchain neither can install it here at work. Would you mind fixing this when you can?

Thank you for the plugin

By default, this script makes the dragged object jump to the right of the cursor while holding down the mouse button and dragging it. How can I make it so the dragged object stays where it is, relative to the cursor, when one first holds down the mouse button? For example...

http://jqueryui.com/sortable/#portlets

Hey, Jonny.
Thanks for your plugin first, I really like it.

Maybe it is an asked question, but it really confused me.

I'm handling a long list, I want to move the item from beginning to end, so I bind 'mousemove' listener and manually scroll the container.

But the placeholder will not update with the 'scroll', it just stays. I think maybe I should also update the position of the placeholder manually, so I read the source code but still could not figure it out.

Could you tell me is there a way to scroll and update the placeholder?

I think this could be a commonly used feature to set a maximum number of nested levels in the sortable list.

Hi Johnny! First of all, I’d like to thank you for the useful plugin!

Could you help me with this strange behaviour of the plugin:

http://jsfiddle.net/LDudk/1/

It doesn’t work when you try to move box 1 under box 3. If box 2 is with the same height it works fine, but it doesn’t when it has greater height than box 1 and 3.

It seems that transform scale <= 0.5 triggers this behaviour, but I need it because I want to fit the whole page on the screen.

Once again thank you for the great plugin and for your time.

For developers who would like to extend the tool, it would be helpful if the internal events like 'drag' and 'drop' passed the internal event handlers 'e' to the public events like 'onDrop', 'onDragStart', etc.

I include the jquery-sortable file but yet still got:
Uncaught TypeError: Object [object Object] has no method 'disableSelection'

Could you explain a little more about how to use you script?

I've used jquey sortable before and love it!

this time round, I wanted to be able to create a draggable cell between 2 tables. I.e.

how do I move the content of a cell from 1 table to another? I specifically only want to copy the content over into an existing cell on another table. It shouldn't remove my previous cell and it shouldn't create a new cell in the new table. The cells in the table are already created but empty initially.

I'm on Windows XP with Google Chrome.
If I take your first example (http://johnny.github.com/jquery-sortable/) and try to sort the second entry as child of the first one, the script does not create a new sublist.

I would expect to get a list like this:

• First
  • Second
• Third

Is this a bug or a feature?

In my case, i need to show hidden container, when i drag over specific element, but here is simplified example:
http://jsfiddle.net/qfT7M/3/

thank you for plugin

Currently when enabling the sortable option to a table, the Table headers also become sortable which means they can also be dragged into the rows. Is there a way to disable the table header from being sortable. Am not sure if this is a Bug or the way it is supposed to work.

Can you add support for dragging multiple elements ? except that it is superb.