Mxui.Layout.Sortable  class     

Makes a sortable control that can accept outside draggables. This is useful for making lists that can be added to, removed from, or re-ordered.

Basic Example

If you have the following html:

<div id='vegetables'>
    <div class='sortable'>Carrots</div>
    <div class='sortable'>Onions</div>
    <div class='sortable'>Lettuce</div>
</div>

The following will make the list sortable:

$('#vegetables').mxui_layout_sortable()

Additionally, you can set up draggable items:

<div id='draggables'>
    <div class='draggable'>Potatoes</div>
    <div class='draggable'>Peppers</div>
    <div class='draggable'>Beans</div>
</div>

Then make them draggable:

$('.draggable').bind("draginit",function(){})

This will allow you to have the list of items that can be re-ordered, but you can also add new items by dragging them into the list.

Demo

<h4>Sortable</h4>
			<div id="vegetables">
				<div class="sortable">Carrots</div>
				<div class="sortable">Onions</div>
				<div class="sortable">Lettuce</div>
			</div>
			<h4>Draggables</h4>
			<div id="draggables">
				<div class="draggable">Potatoes</div>
				<div class="draggable">Peppers</div>
				<div class="draggable">Beans</div>
			</div>

steal("mxui/layout/sortable" , function(){
				$("#vegetables").mxui_layout_sortable();
				$(".draggable").bind("draginit",function(){});
			})

How it works

When re-ordering items, the drag position of the item is monitored. When the item is dragged past the midpoint of the next item (as determined by where), they have their spots swapped.

When injecting new items, the item is dragged over the list and creates a clone of the new item using the makePlaceHolder option method. The clone has its visibility hidden until the new item is dropped into the list.

Using a custom placeholder

By default, the dragged element will be cloned and injected into the list. This process can be overridden by setting a custom makePlaceHolder option method.

$("#vegetables").mxui_layout_sortable({
    makePlaceHolder : function(el, ev, drop, drag){
        return drag.element.clone().css({
            "backgroundColor" : "blue",
            "visibility" : "hidden",
            "position" : "",
            "float" : "left"
        });
    }
});

Injecting a group of elements with a single drag

Multiple items can be injected into the list while dragging a single item by changing the makePlaceHolder option method to return more than one placeholder.

$("#vegetables").mxui_layout_sortable({
    makePlaceHolder : function(el, ev, drop, drag){
        var css = {
                    "visibility":"hidden",
                    "position" : "",
                    "float" : "left"
                },
                placeholders = $(drag.movingElement).clone().css(css);
        $.each($.find('.draggables').not(drag.movingElement), function(i, child) {
            placeholders = placeholders.add($(child).clone().css(css));
        });
        return placeholders;
    }
});

API

Mxui.Layout.Sortable(el, options) -> mxui.layout.sortable