JQuery Sortable — вложенный дескриптор

Я использую jquery sortable для перетаскивания блоков на странице. Однако у меня проблемы с ручкой.

HTML-код блока выглядит так:

<div class="row insumo-editor-module" style="">
    <div class="span12 module-toolbar">
        <div class="btn-group pull-right">
            <button class="btn btn-inverse btn-remove-module"><i class="icon-remove-circle icon-white"></i></button>
            <button class="btn btn-inverse btn-move-module"><i class="icon-move icon-white"></i></button>
        </div>
    </div>

    <!-- More html here -->        
</div>

Javascript, чтобы сделать его сортируемым, выглядит следующим образом (каждый модуль .insumo-editor-module содержится в editor_zone, который является div).

editor_zone.sortable( {
    handle: '.btn-move-module',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
}).disableSelection();

Я пытался использовать ссылку непосредственно в .insumo-editor-module в качестве дескриптора, и это сработало нормально. Я также полностью удалил атрибут дескриптора, и он работает. Однако попытка использовать .btn-move-module не работает.

Есть ли способ использовать вложенный html в качестве дескриптора?

здесь есть jsfiddle

заранее спасибо


handle jquery jquery-ui jquery-ui-sortable
person xonorageous    schedule 03.07.2013    source источник
comment
Почему вы передаете объект jQuery дескриптору?   -  person rusln    schedule 04.07.2013
comment
Извините, я не хотел помещать это туда, я сначала просто попробовал дескриптор: '.btn-move-module', но это не сработало, поэтому я начал играть с ним.   -  person xonorageous    schedule 04.07.2013
comment
Еще одна вещь: зачем вам настоящий элемент ‹button› в качестве дескриптора? Я предполагаю, что вы используете бутстрап для его стилизации?   -  person rusln    schedule 04.07.2013
comment
Да, я использую класс btn-group для стилизации панели инструментов для каждого модуля. Кнопка находится внутри панели инструментов   -  person xonorageous    schedule 04.07.2013
comment
Я добавил jsfiddle в вопрос   -  person xonorageous    schedule 04.07.2013
comment
Поскольку по умолчанию кнопки нельзя перетаскивать, см. документы jquery, и я думаю, что вы можно было бы сделать их перетаскиваемыми, но если вы можете стилизовать любой элемент как кнопку, то это было бы лучшим решением, imo (кстати, скрипка выглядит отлично :))   -  person rusln    schedule 04.07.2013
comment
ок rusln, спасибо за ответ. попробую заменить кнопку чем нибудь другим   -  person xonorageous    schedule 04.07.2013

Ответы (2)


arrow_upward
2
arrow_downward

Проблема решена. Вы можете без проблем вложить дескриптор в другие элементы. Заменив на стандартную якорную ссылку, сортируемые элементы теперь перемещаются без проблем.

Спасибо rusln за помощь

person xonorageous    schedule 04.07.2013

arrow_upward
1
arrow_downward

Попробуйте обернуть вложенный html в теги <li> внутри <ul> и сделать ul сортируемым.

Также обратите внимание на параметр items в сортируемом виджете jquery.ui:

$( ".selector" ).sortable({ items: ".row" });
person Oleksii Aza    schedule 03.07.2013
comment
Алексей, спасибо за ответ. Вам не нужно иметь список для сортировки для работы, с div он уже работает. Если я удаляю дескриптор из моего вызова sortable, он работает нормально. Моя проблема заключается в том, чтобы просто использовать .btn-move-module в качестве дескриптора. - person xonorageous; 04.07.2013