Is there any way to drop the <li> when it is taken out of the conatiner div?

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开发者_如何学Go 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

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 });

Are you looking for something like this?:

HTML:

<div id="draggable_containment">
     <div id="draggable_content">Draggable content here</div>
</div>

SCRIPT:

var draggable_content = $('#draggable_content');
var draggable_containment = $('#draggable_containment');

draggable_content.draggable({ containment: draggable_containment });

CSS:

#draggable_containment { widht: 300px; height: 300px; }

TIP:

You could set width and height on the containment dynamically with javascript. If the child elements of the containment are absolute positioned it could result that the containment doesn't "stretch" as it should. This is why we need to set width and height.

Hope this helps you and sorry if my English is a little rusty.