Multi-support

[maikelmclauflin]

has anyone found any good plugins that plays nice with this one that does multidragging support? I can't seem to find anything that works very well. Great plugin by the way. probably the best one I've seen.

[lukemt]

+1

[tangdw]

+2

[hongz1]

I had to implement multi-select feature and tried to utilize drop animation. hope this helps people who looking for multi-select. onDragStart

// set $item relative to cursor position
onDragStart: function ($item, container, _super) {
   //**** START ***
    if ($item.hasClass('highlight') === true) {
        if ($item.siblings('.highlight').length > 0) {
            var $clonedItem = $item.clone().removeClass('highlight');
            $item.data('empid', null).addClass('sort-multi').html('');
            $clonedItem.appendTo($item);
            $item.siblings('.highlight').removeClass('highlight').appendTo($item);
        } else {
            $item.removeClass('highlight');
        }
    }
    //**** END ***
    var offset = $item.offset(),
        pointer = container.rootGroup.pointer;
    adjustment = {
        left: pointer.left - offset.left,
        top: pointer.top - offset.top
    };
    _super($item, container);
},

onDrop

// animation on drop
onDrop: function ($item, container, _super) {
    var $clonedItem = $('<li/>').css({ height: 0 });
    $item.before($clonedItem);
    $clonedItem.animate({ 'height': $item.height() });

    $item.animate($clonedItem.position(), function () {
        $clonedItem.detach();
        _super($item, container);
        //**** START ***
        if ($item.hasClass('sort-multi') === true) {
            $item.replaceWith(function () {
                return $('li', this);
            });
        }
        //**** END ***
    });
},

Additional jQuery events will prevent to keep highlighting (I had total 4 sortable tables)

$(document).mouseup(function (e) {
    var $container = $('ol.table-sort');
    if (!$container.is(e.target) && $container.has(e.target).length === 0) {
        $container.find('li.highlight').removeClass('highlight');
    }
});
$('ol.table-sort').on('click', 'li', function () {
    $(this).toggleClass("highlight");
    $('ol.table-sort').not($(this).parent()).find('li.highlight').removeClass('highlight');
});