Есть ли какой-нибудь способ отбросить <li>, когда он вынут из контейнера?

Question

У меня есть требование, в котором у меня есть контейнер div, который содержит 3 <ul>, к которому прикреплен драгсорт. Структура выглядит как

<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>

Требование:

эти элементы перетаскиваются между этими списками.но элемент не должен быть извлечен из контейнера div (визуально нет), есть ли способ отсоединить мышь от элемента, когда somone пытается перетащить элемент из контейнера div

, как есть

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

ссылка: http://jqueryui.com/demos/draggable/#constrain-movement

Answer 1

Я хочу, чтобы функциональность сдерживания в плагине jquery dragsort

Если вы имеете в виду jQuery List DragSort , он закодирован, чтобы содержать перетаскиваемый элемент внутри контейнера, но только внутри UL, если вы не перетаскиваете между списками. Таким образом, чтобы указать пользовательский контейнер, вам нужно изменить код. Так что найдите это в коде:

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

И заменить на:

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

Далее найдите это:

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

И заменить на это:

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

Теперь вызовите dragsort следующим образом:

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

Answer 2

Вы ищете что-то подобное?:

HTML:

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

СКРИПТ:

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

draggable_content.draggable({ containment: draggable_containment });

CSS:

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

СОВЕТ:

Вы можете динамически устанавливать ширину и высоту содержимого с помощью javascript.Если дочерние элементы содержимого расположены абсолютно, это может привести к тому, что содержимое не «растянется», как должно.Вот почему нам нужно установить ширину и высоту.

Надеюсь, это поможет вам, и извините, если мой английский немного ржавый.