Question

i have a requirement in which i have a container div that contains 3 <ul> on which dragsort is attached stucture is comething like

<div id="container">

    <ul id="list1">
        <li><div>a</div></li>
        <li><div>a</div></li>
        <li><div>a</div></li>
        <li><div>a</div></li>
    </ul>
    <ul id="list2">
        <li><div>b</div></li>
        <li><div>b</div></li>
        <li><div>b</div></li>
        <li><div>b</div></li>
    </ul>
    <ul id="list3">
        <li><div>c</div></li>
        <li><div>c</div></li>
        <li><div>c</div></li>
        <li><div>c</div></li>
    </ul>
</div>

Requirement:

these item are dragged & drop in between these lists . but item should not be taken out of the container div (visually not) is there any way to detach the mouse from the item when somone is trying to drag item out of the container div

like there is

containment: "#containment-wrapper" in jquery  .draggable(

reference: http://jqueryui.com/demos/draggable/#constrain-movement

Answer 1

i want containment functionality in jquery dragsort plugin

If you’re referring to jQuery List DragSort, it is coded to contain the dragged item within a container but only inside UL if you’re not dragging between lists. So to specify a custom container you will need to modify the code. So find this in the code:

if (!opts.dragBetween) {
    var containerHeight = $(list.container).outerHeight() == 0 ? Math.max(1, Math.round(0.5 + list.getItems().size() * list.draggedItem.outerWidth() / $(list.container).outerWidth())) * list.draggedItem.outerHeight() : $(list.container).outerHeight();
    list.offsetLimit = $(list.container).offset();
    list.offsetLimit.right = list.offsetLimit.left + $(list.container).outerWidth() - list.draggedItem.outerWidth();
    list.offsetLimit.bottom = list.offsetLimit.top + containerHeight - list.draggedItem.outerHeight();
}

And replace with:

if (!opts.dragBetween || typeof opts.containment != "undefined") {
    var box = typeof opts.containment != "undefined" ? $(opts.containment) : $(list.container);
    var containerHeight = box.outerHeight() == 0 ? Math.max(1, Math.round(0.5 + list.getItems().size() * list.draggedItem.outerWidth() / box.outerWidth())) * list.draggedItem.outerHeight() : box.outerHeight();
    list.offsetLimit = box.offset();
    list.offsetLimit.right = list.offsetLimit.left + box.outerWidth() - list.draggedItem.outerWidth();
    list.offsetLimit.bottom = list.offsetLimit.top + containerHeight - list.draggedItem.outerHeight();
}

Next find this:

if (!opts.dragBetween) {
    top = Math.min(this.offsetLimit.bottom, Math.max(top, this.offsetLimit.top));
    left = Math.min(this.offsetLimit.right, Math.max(left, this.offsetLimit.left));
}

And replace with this:

if (this.offsetLimit != null) {
    top = Math.min(this.offsetLimit.bottom, Math.max(top, this.offsetLimit.top));
    left = Math.min(this.offsetLimit.right, Math.max(left, this.offsetLimit.left));
}

Now invoke dragsort like this:

$("#container ul").dragsort({ containment: "#container", dragBetween: true });