Provide the parent element and child element to the onchange event.

Daniel: I will log that as a suggestion for the upcoming versions.

An option to keep depth static and not allow dragging out of a certain depth into another. Example: option to now allow dragging of a file outside the folder that it is currently in, only sort within the folder that the item is. Parent's would sort at their own depth as well etc.

is there a way to get the serialized order outside of onChange (like onSumbit of a form)? i modified the serialize function to also send the class of the item (since that can change too, but if somebody changes the class but not the order, none of the information is sent

nickkwest: I get what you mean. It is a pretty specific need. Perhaps you could provide that to your users by simply using regular Sortables (eg.: you would have one Sortable for each hierarchy you wanted to sort).

issac.kelly: The recommended way to do this is to implement the onChange and make it save the serialized order in a global variable somewhere. You can latter on access that variable, when you submit a form, for instance. I don't recommend you to use the plugin's internal variable that stores the serialized representation, as that may change in the future (if you do what I told you your app will be more decoupled from my plugin's internals).

I'm in a similiar boat as nickkwest. I need to restrict an list item's nest depth depending on whether or not it has any children. I tried using onStart and then set the class "no-nesting" to the appropriate items. It seems however, that when I did this, the class was ignored and the item was allowed to be nested.

Hi,

I am a total noob and have several questions:

1) How to get the hash output into a form? 2) How to use the hash output the serialize the list?

See my demo/test page for examples and more questions: http://www.sourceskins.com/index.html

Thank you for your time!

Is anyone know approximately when can we expecting the next version which can limit the nesting level coming out? Thanks,

Thanks

One bug I noticed when looking at the demos linked above, is that the onchange function isn't called for the 'spans-divs' example when items are moved within the same tree-level. Note this does work properly for the 'left-to-right' example. I determined this is because the 'spans-divs' is using div-tags where as the working example is using ul/li tags. So there appears to be an error with onchange when using divs... or is there something i'm missing?

In regards to my earlier post, I figured out what the problem 'really' was. There are no 'IDs' in the spans-divs example, and without them the onchange won't get called when elements change on the same tree-level... ooops. my bad.

Hi! Great code. I was just wondering if you were still planning on adding nesting depth limits to the code?

Hi! I need depth limit too. Thanks

Hi, In IE6, the font of the item while it is dragged becomes strangely bolded. I am guessing this is a wierd IE problem but this doesn't seem to occur with your nested sortable widget demo. Any recommendations for a fix so the text stays constant? This also applies to elements after they are dropped if the revert effect is turned on.

Hi guys,

Sorry, but I can't make any promises on dates for any new features or bug fixes, since I am pretty busy with some other projects. Besides, the first priority should be moving this to use JQuery UI instead of Interface (which was deprecated). I will gladly apply any pathes you provide, though.

mauricederegt: Use the onChange callback to do anything you want with the serialized output (including sending it on a form, and so on). You can easily use the jQuery for that (look up the jQuery docs, it's been quite a while since I last used it). If you use the hash output in a get request (such as http://url?HASH_OUTPUT) your server side language (such as PHP or Ruby on Rails) should interpret that and create a hash/array in the corresponding language automatically. Refer to the NestedSortableWidget? code to see a better way to do that.

Thanks heaps for this great code, you couldn't have made it any simpler or robust. Great work!

One question though, sort of relating to nickkwest's question above: Is it possible to call the serialize function other than onchange? I have added the ability to 'remove' and 'add' items to the list dynamically and would like those actions to trigger the onChange or serialize call so that I can save the added values.

Any ideas?

I could might help out converting it to JQuery UI if desirable.. ?

How do I handle onClick event? For example I must know which one of folders is choosen

I am adding and removing items dynamically from a sortable. When I delete an item, I need to be able to grab the serialezed data. Is there a way to get this data, or to mimic a change so that the onChnage event will fire?

I experienced a problem whereby the dragged elements would disappear while dragging. I determined that this was due to a z-index issue. When dragging, the z-index reverts to 0 (??). My first thought was to modify the class used in the helper parameter, but that didn't work. I wound up having to override #dragHelper in the CSS and put a z-index in there. Since #dragHelper isn't documented, I'm wondering if there is a better way to accomplish the same goal?

Hi,

I have a problem with my code and would be very grateful if somebody would put me on the right track.

I have a mysql table structured like this: cid = autoincrement primary key ord = order parent title

My php generated list ordered by ord could look sth. like this:

<ul id="left-to-right" class="page-list">
  <li id="ele-1" class="clear-element page-item left">
    <div class='sort-handle'><img src="img/handle.gif" align="left"/></div>
    Lorem ipsum 1</li>
  <li id="ele-2" class="clear-element page-item left">
    <div class='sort-handle'><img src="img/handle.gif" align="left"/></div>
    Lorem ipsum 2
    <ul class="page-list">
      <li id="ele-3" class="clear-element page-item left">
        <div class='sort-handle'><img src="img/handle.gif" align="left"/></div>
        Lorem ipsum 21</li>
      <li id="ele-4" class="clear-element page-item left">
        <div class='sort-handle'><img src="img/handle.gif" align="left"/></div>
        Lorem ipsum 22 </li>
    </ul>
  </li>
  <li id="ele-5" class="clear-element page-item left">
    <div class='sort-handle'><img src="img/handle.gif" align="left"/></div>
    Lorem ipsum 3</li>
</ul>

The id of each list element contains cid from my table.

Now my code:

<script type="text/javascript">
jQuery( function($) {
$('#left-to-right').NestedSortable(
	{
		accept: 'page-item',
		noNestingClass: "no-nesting",
		opacity: 0.8,
		helperclass: 'helper',
		onChange: function(serialized) {	
			$.post("saveMenu.php", 'm='+serialized[0].hash);		
		},
		autoScroll: true,
		handle: '.sort-handle'
	}
);
});
</script>

And saveMenu.php:

<?php
$aMenu = $_POST['left-to-right'];
function saveMenu($parent, $children) {
	$parent = (int) $parent;
	$i = 1;
	foreach ($children as $k => $v) {
		$id = (int) $children[$k]['id'];
		$upd = mysql_query("UPDATE `news` SET `parent` = ".$parent.", `ord` = ".$i." WHERE `cid` = ".$id) or die(mysql_error());
		if (isset  ( $children[$k]['children'][0]  )) {
		saveMenu($id, $children[$k]['children']);
		}
		$i++;
	}
}

saveMenu(0, $aMenu);
?>

OK. With this code I can reorder (and mysql is updated) all elements except the first one. I can place it anywhere, put other elements in front of it but mysql table is not updated. What am I missing?

Thanks in advance

To skriptek：

change

$aMenu = $POST'left-to-right'?;

to

$aMenu = $POST'm'?;

hope it's useful :]

hi, I like the perfect plusin,so i want to use it to effect a tree.how can i get it with the tree-view plusin or by other method ? just effect the expandable and collapsable ,can you help me? thanks a lot.

I would like to add and remove items dynamic. Is there any documentation for it?

The problem is, if i delete the root element of a nested list like 1 1.1 1.1.1 1.1.2 1.1.3

all items disappear. For example i only want to delete the item 1.1 and all children should be moved to the root item 1 - how to i do that? :)

Greets!

Here is my example again: # Item 1 ## Item 1.1 ### Item 1.1.1 ### Item 1.1.2 ### Item 1.1.3

If Item 1.1 is deleted, the childrens should go to Item 1 like this: # Item 1 ## Item 1.1.1 ## Item 1.1.2 ## Item 1.1.3

I'm sorry, the Wiki-List-Function doesn't work correctly?

Hi,

Great code! Just what I'm looking for.

A small problem I've got is an "input type=text" element in one of my LI elements - in IE it's not possible to select any text within the element using either the mouse or keyboard. I'm guessing it's something to do with the iDraggable object applied to a parent element, but not sure how to disable it so that text in the control can be selected normally.

Is there any quick fix for this?

Thanks in advance for any help.

I've been trying to get this working properly and I just can't make it work. It nearly works, but after being moved once, certain items can't be selected anymore. Here's my page, I basically copied it all from the demo page. It uses the exact same js files as the demo page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Page</title>
    <style type="text/css">
        div.wrap {
			border:1px solid #BBBBBB;
			padding: 1em 1em 1em 1em;
		}
		
		.page-list {
			list-style: none;
			margin: 0;
			padding: 0;
			display: block;
		}
		
		.clear-element {
			clear: both;
		}
		
		.page-item1 > div,
		.page-item2 > div,
		.page-item3 > div,
		.page-item4 > div {
			background: #f8f8f8;
			margin: 0.25em 0 0 0;
		}

		.left {
			text-align: left;
		}
		
		.right {
			text-align: right;
		}

		.sort-handle {
			cursor:move;
		}
		
		.helper {
		border:2px dashed #777777;
		}
		
		.current-nesting {
			background-color: yellow;
		}
		
		.bold {
			color: red;
			font-weight: bold;
		}
    </style>
    <script type="text/Javascript" src="../js/jquery.js"></script>
    <script type="text/Javascript" src="../js/interface.js"></script>
    <script type="text/Javascript" src="../js/inestedsortable.js"></script>
    
</head>
<body>
    <div class="wrap">
        <ul id="left-to-right" class="page-list">

            <li id="ele-1" class="clear-element page-item1 left no-nesting">
                <div class='sort-handle'>File 1</div>
            </li>
            <li id="ele-2" class="clear-element page-item1 left no-nesting">
                <div class='sort-handle'>File 2</div>
            </li>
            <li id="ele-3" class="clear-element page-item1 left">
                <div class='sort-handle'>Folder 1</div>
            </li>
             <li id="ele-4" class="clear-element page-item1 left">
                <div class='sort-handle'>Folder 2</div>
                <ul class="page-list">
                    <li id="ele-5" class="clear-element page-item1 left">
 	                    <div class='sort-handle'>Folder 3</div>
	                    <ul  class="page-list" >
                            <li id="ele-6" class="clear-element page-item1 left no-nesting">
        	                    <div class='sort-handle'>File 3</div>
                            </li>
	                    </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script type="text/Javascript">
        jQuery(function($){
	        $(''#left-to-right').NestedSortable({
		        accept: 'page-item1',
		        noNestingClass: "no-nesting",
		        opacity: .8,
		        helperclass: 'helper',
		        autoScroll: true,
		        handle: '.sort-handle'
	        });
        });
    </script>
</body>
</html>

Just to verify, tested in Firefox it appears to work fine. But the problem occurs in IE7 (the demo page works fine in IE7).

I've just seeb the issue here: http://code.google.com/p/nestedsortables/issues/detail?id=4

I've taken the workaround of using jquery 1.1.4, and it all seems good now :)

Hi,

for my implementation, I need only the id of the dragged element. How can I find out this id?

Best regards...

Hiya,

I'm struggling to incorporate a linked image within the <li> element.

This causes problems: <li><a href="#"><img src="an_image.gif"/></a>Page Title</li>

In that it will either cause the image to drop off, or the entire list item to collapse entirely.

Am I missing something very obvious or is there a magic switch I need to use with CSS to control the relationship between the <li> element and the image & link nested within it?

Thanks

Well, after too much head scratching I've opted for the <spans'n'divs> method. While not as clear cut as the unordered list, it is proving to be a little more robust in terms of nested elements (links / images etc) not dropping into oblivion.

Sweet.

Hello, I'm trying to use the sortable list feature with mysql/php to save the list order, I've pretty much used the script that skriptek posted above.

echo "<div id='list'>";
$db->Query("SELECT * FROM Contacts ORDER BY DisplayOrder ASC");
$result = $db->result;
while ($row = mysql_fetch_array($result)){
	echo "<div class='line' id='ele-" . $row['ContactsID'] . "'>
			<div class='line_icon'>
			<a href='Contacts_Modify.php?ContactsID=" . $row['ContactsID'] . "'><img src='images/icon_edit.gif' alt='View Contacts Details' class='noborder'></a>
			<a href='Contacts_Main.php?action=delete&ContactsID=" . $row['ContactsID'] . "' onclick=\"return confirm('Are you sure you want to remove this Contacts?');\"><img src='images/icon_del.gif' alt='Delete Contacts\' class='noborder'></a>
			</div>
			<div class='line_text'><a href='Contacts_Modify.php?action=edit&ContactsID=" . $row['ContactsID'] . "'>" . $row["ContactName"] . "</a></div>
            <div class='clear'>&nbsp;</div>
			</div>";
			
}
echo "</div>";


echo "</div>";
echo $page->AdminFooter();
?>
<script type="text/javascript">
jQuery( function($) {

	$('#list').Sortable(
		{
		accept: 'line',
		opacity: 0.8,
		helperclass: 'helper',
        onChange: function(serialized) {
            $.post("SaveOrder.php", 'm='+serialized[0].hash);
        }

		}
	);
	
});
</script>

and this is my SaveOrder?.php script

include '../functions/_settings.php';

$aMenu = $_POST['m'];

function saveOrder($children) {
    $i = 1;
    foreach ($children as $k => $v) {
        $id = (int) $children[$k]['id'];
        $upd = mysql_query("UPDATE Contacts SET DisplayOrder = '".$i."' WHERE ContactsID = ".$id);


        if (isset  ( $children[$k]['children'][0]  )) {
            saveOrder($id, $children[$k]['children']);
        }
    $i++;
    }
}

mysql_query("INSERT INTO Errors SET Msg = '" . mysql_errno() . ": " . mysql_error() . "'");

saveOrder($aMenu);

but this wont write anything to me data base, any ideas would be great!

Several people above (e.g. dritterman) have mentioned dynamically adding and removing elements. Could somebody advise on the best way of achieving these activities?

Thanks.

does anyone know what code is being called that's responsible for allowing items to be draggable? I have the code dynamically appending new items to the list but they cannot be dragged.

It's not the cleanest but I'll post my code after its worked out.

How about a way to cancel a sort operation? Possibly a callback onstart? return false or similar?

@daniel: we needed the same thing, we're using this.

@author: I love the script, but I don't think it is necessary to return the entire list of data, only thing of interest is the elements that have been affected. Like I said though, this script is insanely helpful and I appreciate your hard work.

jQuery.iNestedSortable.check = function(dragged)
{
	jQuery.iNestedSortable.newCheck(dragged);
		
	$return = jQuery.iNestedSortable.oldCheck(dragged);
		
	$element = $(dragged);
	$parent = $element.parent().parent();
	$position = -1;
		
	jQuery.each($element.parent().children(), function(i)
	{
		if($(this).attr('id') == $element.attr('id'))
		{
			$position = i;
		}
	});
		
	console.log('element = ',$element.attr('id'));
	console.log('parent = ',$parent.attr('id'));
	console.log('position = ',$position);
		
	return $return;
};

As mentioned is Issue 9, I have a slight problem. I need to limit the depth of the tree. So far this works pretty well, only one slight problem.

Its still possible to move menuitems with subitems into a subitem, when the nesting limit is reached.

When I look to the code I think the best way to stop this is to check in shouldNestItem if the item that is being dragged has subitems, and then check if including the nested items the limit is reached.

It looks like berpasan was trying to get this done, but his version doesnt work yet and it looks like this project is kinda dead.

			//for each leaf element inside the dragged element (that have no elements nested to it)
			jQuery(e.nestedSortCfg.nestingTag + "." + e.nestedSortCfg.nestingTagClass.split(" ").join(".") + " > ." + e.sortCfg.accept.split(" ").join(".") + ":first-child", jQuery.iDrag.dragged)
				.not("*["+e.nestedSortCfg.nestingTag + "." + e.nestedSortCfg.nestingTagClass.split(" ").join(".")+"]")
				.each( function(i) {
					var draggedIndex = 0;
					//finds out 
					var parentLength = jQuery(this).parents("." + e.sortCfg.accept.split(" ").join(".")).each(
						function(i) {
							draggedIndex = i;
							return this == jQuery.iDrag.dragged;
						}
						).length;
					//here dradraggedIndex holds the index 
					//of the dragged element in the ancestors array of the leaf element
					var thisLevel = parentLength - draggedIndex;
					if (thisLevel > nLevelDrag )
						nLevelDrag = thisLevel;
					}
				);

The inside of this function is never reached, it looks like it that this is where you are trying to check if the item has subitems, and then check if including the subitems the nestingLimit is reached

			if (nLevelPrec + nLevelDrag > e.nestedSortCfg.nestingLimit) return false;

But now I cant see why this wont work. I tried some stuff myself, which isnt as pretty, but easy, because I only want to accept a nestingLimit of 1. I tried to check if there is a subitem nested, but this function always returns null...

Is there anybody with a fix for this?

Basicly the only thing I need is to know inside shouldNestItem if the item that is being dragged has subItems. If someone could help me with that, it would be muchly apreciated. When I find a fix for this problem I will post it here, because I can see there are many people waiting on this:)

I'm trying kelly.dirk's idea from Nov. 9 above to return the element id, parent id and position when an item is dropped. I'm not real clear on how or where to implement it though. I placed a version in the iNestedSortable check: function like this...

check : function(dragged)

{

jQuery.iNestedSortable.newCheck(dragged);

$return = jQuery.iNestedSortable.oldCheck(dragged);

$element = $(dragged); $parent = $element.parent().parent(); $position = 1;

jQuery.each($element.parent().children(), function(i) {

if($(this).attr('id') == $element.attr('id')) {

$position = i;

}

});

console.log('parent = ',$parent.attr('id')); console.log('element = ',$element.attr('id')); console.log('position = ',$position);

return $return;

}

And while that does return what I am looking for to the console, as cool as that is, it would be more useful to access that info from onChange directly on the page where iNestedSortable is called.

Hi, very pretty script ! I'm love it !

I'have a probleme with my server side version, I don't have probleme to serialize data (when i write in a div, I have my answer) but when I want make a $post request I receive only the first item information

My javascript script:

	jQuery( function($) {
		$('#list-container').NestedSortable({
			accept: 'sortable',
            opacity: 0.8,
            autoScroll: true,

			onChange: function(serialized) {
				serial = serialized[0].hash;
				$("#serialize").html(serial)
				$.post("menu.php", 'menu= '+ serial);
			}
		});
	});

My very simply PHP script:

$valeur = isset($_POST['menu']) ? $_POST['menu'] : '';
echo '<pre>';var_dump($valeur); echo '</pre>';

Can you help me ?

Nico

I have a answer of my previous post

I have changed this :

onChange: function(serialized) {
                                serial = serialized[0].hash;
                                $("#serialize").html(serial)
                                $.post("menu.php", 'menu= '+ serial);
                        }

by that :

onChange: function(serialized) {
     $.post("menu.php", serialized[0].hash);
}

POST DATA

I have a question regarding the $.post function:

Are the data in the .hash posted automaticly from the onChange function or do I need to have a form submit button to pass the variables to the function or php script processing the data? I have tried the above examples but are not able to get any data from the post or update the tables in my DB

look at this. http://skolman.kei.pl/inestedsortable.js

function send(event) {
	var current = event[0].my.current;
	var parent = event[0].my.parent;
	var prev_sibling = event[0].my.prev_sibling;

	$.ajax({
		type: "POST",
		async: false,
		url: "/ajax-move-node",
		data: "parent="+parent+"&current="+current+"&prev_sibling="+prev_sibling
	});
}

$('#list-container').NestedSortable({
    accept: 'sortable-element-class',
    onChange: send,
    helperclass: 'highlight'
    
});

Hi - thanks for this plugin, i've been using it for a while now with no problems. However, i've been asked to make a change and can't work out how to do it.

Currently. when you drag an element down the tree, if you drag it over a closed branch, the branch will open automatically to show where the element would sit within it. I want to STOP it doing that - ie, so that a branch only ever opens when you tell it to (by clicking on it's plus sign). Is that possible with the current options?

thanks again max

Hello everybody. Is there a ASP.Net on receiving and saving post data. The Request.Form returns a complete string in .Net, no array. Thank you.

JQuery

onChange: function(serialized) {
$.post("<%= Page.Request.Url.AbsoluteUri %>",{ callback: "sorting", data: serialized[0].hash }, function(data) {
	$("#demo-sort-info").html(data+"<br>"+serialized[0].hash);
});

ASP.NET

Request.Form.GetValues("data")[0]

returns

spans-divs[0][id]=art1&spans-divs[0][children][0][id]=art3&spans-divs[1][id]=art2&spans-divs[2][id]=art4&spans-divs[2][children][0][id]=art5&spans-divs[2][children][0][children][0][id]=art6"

I want to have some restrictions in the drag and drop. Like i have categories and articles inside respective categories. So there should not be possible to put the main categories under another (main) category but still every categories should be possible to sort/order.

How can i achieve this?

Thank you in advance.

using this peice of code how can i find out the id of the parent that it orginated from before drag :) any idea's using code below :

jQuery.iNestedSortable.check = function(dragged){ jQuery.iNestedSortable.newCheck(dragged); $return = jQuery.iNestedSortable.oldCheck(dragged); $element = $(dragged); $parent = $element.parent().parent(); $position = -1; jQuery.each($element.parent().children(), function(i) { if($(this).attr('id') == $element.attr('id')) { $position = i; } }); console.log('element = ',$element.attr('id')); console.log('parent = ',$parent.attr('id')); console.log('position = ',$position); return $return;};

Anyone find solution to limiting how deep the tree can go?

Does this great plugin still works under jquery 1.3.2 ?

@dom yes

Has anyone found a way to add items to the list yet? Its easy enough to add them to the HTML but I'm not sure how to make them active for dragging.

Any ideas appreciated?

dfghd

Oh sorry for the previous post.

To add items to the list use jquery

$('#spans_divs').append(' <div class="clear-element page-items left"> <div>Title</div> </div> ');

After that, $('#spans_divs').NestedSortable?(OPTIONS);

if your using ajax to add the items put the $('#spans_divs').NestedSortable?(OPTIONS); at the callback in the OPTIONS.

when can we expect the version the runs on jquery UI and supports nesting limit??

Probably when one of us rolls up our sleeves and writes it ;-)

To anyone that wonders how to get the serialized output without the onChange event, just use this;

var s = $.iNestedSortable.serialize("menuedit");

var hash = s.hash;

where "menuedit" is the id of the element you applied the NestedSortable? to. Make sure you leave out the # !