jQuery- перетаскиваемый и сортируемый пользовательский интерфейс

#jquery #jquery-ui #draggable #jquery-ui-sortable

#jquery #jquery-пользовательский интерфейс #перетаскиваемый #jquery-ui-сортируемый

Вопрос:

Итак, я работал с этим примером: http://jqueryui.com/demos/draggable/#sortable и я добился этого в своем продукте. Однако я хочу внести два существенных изменения.

Я не хочу, чтобы второй список (ToList в моем примере) можно было сортировать самостоятельно. Я только хочу, чтобы он принимал элементы из первого списка (fromList в моем примере).
Когда пользователь перетаскивает элемент из первого списка (fromList) и помещает его во второй список (ToList) Я хочу, чтобы этот элемент был принудительно перемещен на дно.

Предложения? Вот рабочая скрипка того, что у меня есть до сих пор. http://jsfiddle.net/CrtFD /

Ответ №1:

Попробуйте использовать droppable для вашего ToList:

РЕДАКТИРОВАТЬ: согласно комментариям ниже:

http://jsfiddle.net/abzYK/

 jQuery(document).ready(function(){
    jQuery("#fromList li").draggable('destroy').draggable({
        connectToSortable: "#toList",
        revert: "invalid",
        containment: '#equipCont',
        helper: function(e, ui) {
            return jQuery(this).clone().css('width', jQuery(this).width());
        }
    });
    jQuery("#toList").droppable('destroy').droppable({
        drop: function(e, ui) {
            var dragClone = jQuery(ui.draggable).clone();
            jQuery("#toList").append(dragClone);
        }
    });
    jQuery("ul, li").disableSelection();
});

1. Хммм, возможно, вы на правильном пути, но в вашем примере есть две ошибки. 1 он больше не клонирует элемент из списка, а фактически перемещает его. 2 как только я перемещаю элемент в ToList, он все равно перетаскивается.

2. Вот как я это сделал, использовал ваш код, хотя so 1 для вас. jsfiddle.net/abzYK

Ответ №2:

Вы хотите, чтобы ваш ToList был удаляемым, а не сортируемым. Этот пример, похоже, описывает то, чего вы пытаетесь достичь: http://jqueryui.com/demos/droppable/#shopping-cart