jQuery UI Сортируемые дочерние триггеры - PullRequest
1 голос
/ 02 февраля 2011

У меня есть такой список:

<ol id="page_items">        
    <li>
        <label for="page_body_1">Content Area 1</label>
        <textarea name="page_body_1" class="page_content_area" rows="10"></textarea>
    </li>           
    <li>
        <label for="page_body_2">Content Area 2</label>
        <textarea name="page_body_2" class="page_content_area" rows="10"></textarea>
    </li>     
</ol>

Когда страница загружается, #page_items превращается в редактор tinyMCE.Я хочу, чтобы элемент определял, сортируются ли элементы li как <label>, но не как другие дочерние элементы li.Таким образом, единственным элементом, который запускает сортировку, является метка.

Вот мой jQuery:

$(document).ready(function(){
    $("#page_items").sortable({
        activate: function(event, ui) {
            var EditorID = ui.item.find('textarea').attr('id');
            if ( EditorID ){ 
                tinyMCE.execCommand("mceRemoveControl", false, EditorID);
                $('#'+EditorID).hide();
            }
        },
        stop: function(event, ui) {
            var EditorID = ui.item.find('textarea').attr('id');
            if ( EditorID ){ 
                    $('#'+EditorID).show();
                tinyMCE.execCommand("mceAddControl", false, EditorID);
                delete EditorID;
            }
        }
    });
});

Если кому-то интересно, я отключаю tinyMCE, потому что в FireFox, перемещая iFrameвокруг DOM очищает его содержимое и не позволяет снова сфокусироваться на нем.

Есть ли способ отменить сортировку, если выбранный элемент не является меткой?

Если у кого-либо естьПредложения по очистке кода также приветствуются!

Спасибо.

1 Ответ

2 голосов
/ 02 февраля 2011

Это оказалось сортируемым вариантом, которого я раньше не видел (я смотрел ... ох, я смотрел).Опция handle - это то, что мне нужно.Это инициализирует сортировку с указанным параметром handle.

Просто ...

$(document).ready(function(){
    $("#page_items").sortable({
        handle: 'label'
    });
});
...