#71552 by Jan Kassens (jan)

Theme:
/*
Script: Sortables.js
    Contains <Sortables> Class.

License:
    MIT-style license.
*/

/*
Class: Sortables
    Creates an interface for drag and drop sorting of a list or lists.

Arguments:
    list - required, the list or lists that will become sortable.
        This argument can be a string id, an element, or an object or array of either strings or elements. When a single
        list (or id) is passed, that list will be sortable only with itself. To enable sorting between lists, one or more
        lists or id's must be passed using an array or an object. See Examples below.
    options - an Object, see options and events below.

Options:
    clone - whether or not to display a copy of the actual element while dragging. defaults to true.
    cloneOpacity - opacity of the place holding element
    elementOpacity - opacity of the element being dragged for sorting
    revert - whether or not to use an effect to slide the element into its final location after sorting. If you pass an object it will be treated as true and used as options for the revert effect. defaults to false.
    handle - a selector which be used to select the element inside each item to be used as a handle for sorting that item.  if no match is found, the element is used as its own handle.
    constrain - whether or not to constrain the element being dragged to its parent element. defaults to false.

Events:
    onStart - function executed when the item starts dragging
    onComplete - function executed when the item ends dragging

Example:
    (start code)
    var mySortables = new Sortables('list-1', {
        revert: {duration: 500, transition: Fx.Transitions.Elastic.easeOut}
    });
    //creates a new Sortable instance over the list with id 'list-1' with some extra options for the revert effect
    
    var mySortables = new Sortables(['list-1', 'list-2', 'list-3']);
    //creates a new Sortable instance allowing sorting between the lists with id's 'list-1', 'list-2, and 'list-3'
    (end)

*/

var Sortables = new Class({
    
    options: {
        constrain : false,
        clone: true,
        cloneOpacity: 0.7,
        elementOpacity: 0.7,
        handle: false,
        revert: false,
        onStart: $empty,
        onComplete: $empty
    },

    initialize: function(lists, options){
        this.setOptions(options);
        if(this.options.revert) this.options.revert = $merge(this.options.revert, {duration: 250, wait: false, onComplete: this.reset.bind(this)})
        
        this.idle = true;
        this.lists = [];
        this.hovering = false;
        this.newInsert = false;
        this.bound = {
            'start': [],
            'end': this.end.bind(this),
            'move': this.move.bind(this)
        };
        
        switch($type(lists)){
            case 'array': for (var i = 0, l = lists.length; i < l; i++) this.lists[i] = $(lists[i]); break;
            case 'object': for (var e in lists) this.lists.push($(lists[e])); break;
            case 'string': case 'element': this.lists.push($(lists)); break;
            default: return;
        }
        
        this.reinitialize();
        if (this.options.initialize) this.options.initialize.call(this);
    },
    
    /*
    Property: reinitialize
        Allows the sortables instance to be reinitialized after making modifications to the DOM such as adding or removing elements from any of the lists.
    */
    
    reinitialize: function(){
        if (this.handles) this.detach();
        
        this.handles = [];
        var elements = [];
        
        this.lists.each(function(list){
            elements.extend(list.getChildren());
        });
        
        this.handles = !this.options.handle ? elements : elements.map(function(element){
            return element.getElement(this.options.handle) || element;
        }.bind(this));
        
        this.handles.each(function(handle, i) {
            this.bound.start[i] = this.start.bind(this, elements[i], true);
        }, this);

        this.attach();
    },
    
    /*
    Property: attach
        Attaches the mousedown event to all the handles, enabling sorting.
    */
    
    attach: function(){
        this.handles.each(function(handle, i){
            handle.addEvent('mousedown', this.bound.start[i]);
        }, this);
    },

    /*
    Property: detach
        Detaches the mousedown event from the handles, disabling sorting.
    */
    
    detach: function(){
        this.handles.each(function(handle, i){
            handle.removeEvent('mousedown', this.bound.start[i]);
        }, this);
    },

    check: function(element, list){
        element = element.getCoordinates();
        var coords = list ? element : {
            left: element.left - this.list.scrollLeft,
            right: element.right - this.list.scrollLeft,
            top: element.top - this.list.scrollTop,
            bottom: element.bottom - this.list.scrollTop
        };
        return (this.curr.x > coords.left && this.curr.x < coords.right && this.curr.y > coords.top && this.curr.y < coords.bottom);
    },
    
    where: function(element){
        if (this.newInsert) { this.newInsert = false; return 'before'; }
        var dif = { x : this.curr.x - this.prev.x, y : this.curr.y - this.prev.y };
        return dif[['y', 'x'][(Math.abs(dif.x) >= Math.abs(dif.y)) + 0]] <= 0 ? 'before' : 'after';
    },
    
    reposition: function(){
        if (this.list.positioned) {
            this.position.y -= this.offset.list.y - this.list.scrollTop;
            this.position.x -= this.offset.list.x - this.list.scrollLeft;
        }
        else if (Client.engine.opera) {
            this.position.y += this.list.scrollTop;
            this.position.x += this.list.scrollLeft;
        }
    },
    
    start: function(event, element){
        if (!this.idle) return;

        this.idle = false;
        this.prev = {x : event.page.x, y : event.page.y};
        
        this.styles = element.getStyles('margin-top', 'margin-left', 'padding-top', 'padding-left', 'border-top-width', 'border-left-width', 'opacity');
        this.margin = {
            'top': this.styles['margin-top'].toInt() + this.styles['border-top-width'].toInt(),
            'left': this.styles['margin-left'].toInt() + this.styles['border-left-width'].toInt()
        };

        this.element = element;
        this.list = this.element.getParent();
        this.list.hovering = this.hovering = true;
        this.list.positioned = this.list.getStyle('position').test('relative|absolute|fixed');
        
        var coords,
            children = this.list.getChildren(),
            bounds = children.shift().getCoordinates();
        children.each(function(element){
            coords = element.getCoordinates();
            bounds.left = Math.min(coords.left, bounds.left);
            bounds.right = Math.max(coords.right, bounds.right);
            bounds.top = Math.min(coords.top, bounds.top);
            bounds.bottom = Math.max(coords.bottom, bounds.bottom);
        });
        this.bounds = bounds;
        
        this.position = this.element.getPosition([this.list]);
        this.offset = {
            'list': this.list.getPosition(),
            'element': {'x': event.page.x - this.position.x, 'y': event.page.y - this.position.y}
        };
        this.reposition();
        
        if (this.options.clone) this.clone = this.element.clone().setOpacity(this.options.cloneOpacity);
        else this.clone = new Element(this.element.getTag()).setStyles({'visibility' : 'hidden'}).setHTML('&nbsp;');
        this.clone.injectBefore(this.element.setStyles({
            'position' : 'absolute',
            'top' : this.position.y - this.margin.top,
            'left' : this.position.x - this.margin.left,
            'opacity': this.options.elementOpacity
        }));

        document.addEvent('mousemove', this.bound.move);
        document.addEvent('mouseup', this.bound.end);
        this.fireEvent('onStart', this.element);
        event.stop();
    },
    
    move: function(event){
        this.curr = {'x': event.page.x, 'y': event.page.y};
        this.position = {'x': this.curr.x - this.offset.element.x, 'y': this.curr.y - this
Pastie Support Pastie or read my Pastie << self blog
