Using NestedSortable with JQuery 1.2, sortable items can only be moved once

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Set up a page with a nested sortable list, and use JQuery 1.2.x 
   instead of 1.1.x (The demo page at 
    http://www.bernardopadua.com/nestedSortables/test/nested_sortable/ 
    is a good example right now.)
2. Go to the page in Internet Explorer 6 or 7
3. Drag a node to a new location
4. Try to drag the same node again

What is the expected output? What do you see instead?
The node does not move. When running with JQuery 1.1.x, nodes can be
dragged any number of times.

What version of the product are you using? On what operating system?
This problem manifests when the page is using JQuery 1.2 and the browser is
Internet Explorer. 
The problems do not manifest when the page uses JQuery 1.1, or when the
browser is Firefox/Linux, Safari 3/Windows, Opera 9/Windows, Safari 2/OSX,
or Firefox/Windows.

Please provide any additional information below.
I've also noticed that a double-click event registered on the draggable
element stopped working after the element had been dragged.
Adding jquery.compat-1.1.js does not help.

Original issue reported on code.google.com by n3d...@gmail.com on 22 Sep 2007 at 6:59

[GoogleCodeExporter]

Thanks for reporting this. It seems to be a Interface incompatibility with 
jQuery
1.2, as it happens with the Regular Sortable at the bottom as well.

For now using Interface 1.2 with jQuery 1.2 is not a good idea. I will try to 
look
into that, and maybe _monkey-patch_ Interface to fix that.

Original comment by berpa...@gmail.com on 25 Sep 2007 at 5:56

• Changed state: Accepted

[GoogleCodeExporter]

Original comment by berpa...@gmail.com on 25 Sep 2007 at 6:02

• Added labels: Browser-IE6, Browser-IE7, Component-NestedSortable

[GoogleCodeExporter]

Here's my fix for this problem.
Not a 'real' solution, but it work fine, and destruction/creation of sortable 
seem
not to create memory leak on IE.
The basic idea is to reapply sortable on the onChange event
Prod exemple :
var fixSortable = function(){
        if(!$.browser.msie) return;
        $('.boxColumn').SortableDestroy();
        $('.boxColumn').Sortable({
            opacity : 0.5,
            accept : 'uiBox',
            helperclass : 'boxGhost',
            activeclass : 'sortableactive',
            hoverclass : 'sortablehover',
            handle: '.uiBoxHeader',
            tolerance: 'pointer',
            onChange: function(serialized){
                fixSortable();
            }       
        })
    }

    $('.boxColumn').Sortable({
        opacity : 0.5,
        accept : 'uiBox',
        helperclass : 'boxGhost',
        activeclass : 'sortableactive',
        hoverclass : 'sortablehover',
        handle: '.uiBoxHeader',
        tolerance: 'pointer',
        onChange: function(serialized){
            $('.boxColumn').SortableDestroy();
            $('.boxColumn').Sortable({
                opacity : 0.5,
                accept : 'uiBox',
                helperclass : 'boxGhost',
                activeclass : 'sortableactive',
                hoverclass : 'sortablehover',
                handle: '.uiBoxHeader',
                tolerance: 'pointer',
                onChange: function(serialized){
                    fixSortable();
                }       
            })
        }       
    })

Original comment by pierre.g...@gmail.com on 22 Apr 2008 at 9:15

[GoogleCodeExporter]

Is there a official fix available now?
I have the same problem, but am to nooby on Jquery and it's components to sort 
it out
myself.

Original comment by l00cas.g...@gmail.com on 31 Jul 2008 at 6:55

[GoogleCodeExporter]

My recomendation is just to stick to Jquery 1.1.X if you want to use the 
Interface
plugin and therefore this plugins as well.

I need to rewrite this plugin to work with Jquery UI (the new oficial UI plugin 
for
Jquery), but this will be a lot of work (and I am pretty busy now).

Original comment by berpa...@gmail.com on 3 Aug 2008 at 6:23

[GoogleCodeExporter]

Since jQuery 1.2, empty() remove events too => it causes iDrag (from interface) 
to
not works as expected...
My solution : having a 'customized' empty() function in iDrag.js which do not 
remove
events.
I attached here my 'jquery 1.2' compatible iDrag.js

Original comment by matthieu...@gmail.com on 3 Nov 2008 at 12:02

Attachments:

• idrag_source.js

[GoogleCodeExporter]

@matthieu.paineau:

I've downloaded and tried your fix with jquery 1.2.6, for FF it works like a 
charm!
But in IE 7 you're only able to drag the last item in the list, and when you 
place it
somewhere else in the list you're still only able to drag this item.

Has anyone else experienced this problem? or has anyone a fix?

Original comment by yourivdl...@gmail.com on 28 Nov 2008 at 12:23

[GoogleCodeExporter]

I had the same issue whilst using jquery 1.2.6.
To resolve this I employed the solution suggested by pierre.gayvallet on the 
22nd 
Apr.
With an extra bit of tweaking it now working in IE6+, opera, FF, Chrome.

Original comment by jez.sw...@gmail.com on 28 Jan 2009 at 10:12

[GoogleCodeExporter]

@pierre.gayvallet, Apr 22, 2008

I think it would be better to destruct and re-create the sortable on the onStop 
event. If 
you drag and release an item on it's original place, than the order isn't 
changed and so 
the onChange event isn't triggered.

Original comment by mate...@revista.cz on 4 May 2009 at 10:04

[GoogleCodeExporter]

@jez.swift

Can you upload your solution somewhere? Working example would by great. Thanx.

Original comment by malotapr...@gmail.com on 30 Jul 2009 at 8:49

[GoogleCodeExporter]

I am having the same issue in IE7 and IE8. FF and Chrome are fine. I tried 
pierre.gayvallet's solution but it didn't work.

@jez.swift, what extra tweaking did you have to do?

Thanks.

Original comment by kate.spa...@gmail.com on 12 Aug 2009 at 12:09

[GoogleCodeExporter]

Unfortunately, I already tried the solution proposed by @pierre.gayvallet 
before I realized it was an issue others 
were having.  Since the issue has been around for so long and impacts IE, the 
most common browser, I am 
surprised the priority is only medium, and that it hasn't been addressed for 
over two years.  jQuery 1.3 is already 
out, and jQuery UI is become a more accepted standard.  Just including the 
interface-1.2 plugin has already 
cause other incompatibility issues, particularly with jQuery's scrollTo plugin.

Original comment by buf...@gmail.com on 22 Sep 2009 at 3:32

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

NestedSortableDestroy seems to destroy all nested sortable calls, not just the 
jQuery element specified.  This is 
probably why @pierre.gayvallet solution ultimately isn't working for me, not 
that in an of itself it isn't already 
confusing if the onChange actually executes a significant number of commands.

Original comment by buf...@gmail.com on 22 Sep 2009 at 7:23

[GoogleCodeExporter]

The iDrag.js posted by @matthieu.paineau eventually worked for me. For some 
reason it 
didn't work at first, but now it works great, and I'm using the latest jQuery. 
Thanks!

@bufori, I also noticed the incompatibility issues with scrollTo and ended up 
scrapping 
it in favor of getting my NestedSortable code to work, since that is higher 
priority 
for me. I agree, it would be great if the plugin could be reworked to be 
compatible 
with jQuery UI.

Original comment by kate.spa...@gmail.com on 22 Sep 2009 at 4:52

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

idrag_source.js works just fine.
Thanks a lot!

Original comment by jigoku.s...@gmail.com on 3 Nov 2009 at 10:14

[GoogleCodeExporter]

I couldn't get it to work with the idrag_source.js, it only allows the last 
item to
move for me?

What version of .js files were you using jigoku? Did you change anything else?

Original comment by tonegol...@gmail.com on 10 Nov 2009 at 2:03

[GoogleCodeExporter]

on idrag.js change

var dhe = o.handle ? jQuery(this).find(o.handle) : jQuery(this);
To:
var dhe = o.handle ? jQuery(o.handle,this) : jQuery(this);

Original comment by przemo...@gmail.com on 3 Feb 2010 at 8:54

[GoogleCodeExporter]

To use the custom idrag.js, should I skip the "Interface.js" and include 
"iutil.js",
"idrag.js", "idrop.js" and "isortables.js" separate instead?

It's pretty annoying to use an older version of jQuery only to get this to work.

Thanks!

Original comment by mi...@anderssonweb.se on 26 Mar 2010 at 10:34

[GoogleCodeExporter]

Thanks to all your comments I got it working with jQuery1.4.1
But it does not completely work with jQuery1.4.2

The only problem with JQ1.4.2 appears only if I set handler class {handle: 
'.drag_me'}
and initialize NestedSortable on existing tree.
In that case items in the EVEN tree levels don't become draggable.

If not using "handle class" everythig works fine with JQ1.4.2

cheers :)

Original comment by lanob...@gmail.com on 31 Mar 2010 at 10:13

[GoogleCodeExporter]

i tried the idrag_source.js but it didn't seen to work for me.
I'm trying to get it working with "http://code.jquery.com/jquery-1.4.1.min.js"
in IE i can only drag an item once

a link to my complete script
http://durfoptevallen.nl/nestedSortable/index.html      (jquery-1.4.1.min)
http://durfoptevallen.nl/nestedSortable/index2.html     (jquery-1.1.4)
(text is in dutch)

any help would be appreciated :)

Original comment by PCkuijper on 1 Apr 2010 at 12:00

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

working like a dream now in IE thanks to pierre's comments! 

Original comment by hodcop...@gmail.com on 22 Jun 2011 at 12:00

[GoogleCodeExporter]

Can Anybody solve my nested sortable jquery issue.
I could not access data from ($post) to  controller in php and
mysql.
Code---
 $('#sorting').NestedSortable(
        {
            accept: 'page-item1',
            noNestingClass: "no-nesting",
            opacity: 0.8,
            helperclass: 'helper',
            onChange: function(serialized) {
                alert(serialized[0].hash);
                        $.post("<?php echo base_url(); ?>welcome/update_Nested_sortable_Data", 'serial='+serialized[0].hash);
                },

            autoScroll: true,
            handle: '.sort-handle'
        }
Thanks

Original comment by ranjan.e...@gmail.com on 9 Jul 2013 at 10:19