Как управлять стилем клона перетаскиваемого элемента div при перемещении в сортируемый контейнер?

Я пытаюсь объединить два проекта:

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

                receive: function(event, ui) {
                alert("dropped item ID: " + ui.item.attr('id'));
                $("#draggable").attr('class', 'edit');
                }

stop: function() {
                    if ( !$( "#draggable" ).hasClass( "ui-state-hover" ) ) {
                        $( "#draggable" ).removeClass( "ui-state-highlight" );
                        $( "#draggable" ).addClass( "ui-state-default" );
                        $( "#draggable" ).addClass( "edit" );
                    }
                }

Как я могу этого добиться?

JSFiddle здесь


javascript jquery draggable jquery-ui-sortable jeditable
person Freakishly    schedule 20.12.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Фактически вы можете использовать ui в сортируемом событии stop. Вот краткое их определение:

ui.
helper: The jQuery object representing the helper being sorted
item: The jQuery object representing the current dragged element
offset: The current absolute position of the helper represented as { top, left }
position: The current position of the helper represented as { top, left }
originalPosition: The original position of the element represented as { top, left }
sender: The sortable that the item comes from if moving from one sortable to another

Поэтому вам нужно использовать событие остановки и изменить стиль ui.item следующим образом:

$(ui.item).attr('class', 'ui-state-default edit');

И вам нужно повторно инициировать редактируемый объект следующим образом:

$(document).ready(function() {
    initEditable();
});

function initEditable(){
    $('.edit').editable('http://www.example.com/save.php', {
        indicator : 'Saving...',
        tooltip   : 'Click to edit...'
    });
    $('.edit_area').editable('http://www.example.com/save.php', { 
        type      : 'textarea',
        cancel    : 'Cancel',
        submit    : 'OK',
        indicator : '<img src="img/indicator.gif">',
        tooltip   : 'Click to edit...'
    });
}


$(function() {
    $( "#sortable" ).sortable({
        revert: true,
        update: function() {
            var orders = [];
            $.each($(this).children(), function(i, item) {
                orders.push($(item).data("x"));
            });
            $("#info").text("Order: " + orders.join(","));
        },
        stop: function(event, ui) {
            $(ui.item).attr('class', 'ui-state-default edit');
            initEditable();
        }
    });
});

См. измененный код здесь: http://jsfiddle.net/xvsMh/1/.

person SubRed    schedule 22.12.2012
comment
хорошо объяснено, и JSFiddle работает так, как ожидалось. Спасибо, SubRed - person Freakishly; 24.12.2012
comment
На самом деле, я только что заметил. Похоже, когда вы пытаетесь переставить элементы в сортируемом, непосредственно перед тем, как вы их отпустите (событие остановки), оно превращается в поле редактирования. Есть ли способ исправить это? - person Freakishly; 24.12.2012
comment
@Freakishly см. здесь модифицированную скрипку jsfiddle.net/xvsMh/2. Один из самых простых подходов :) вы можете просто отменить привязку события клика к перетаскиваемому элементу. Надеюсь, поможет. - person SubRed; 24.12.2012
comment
Спасибо, я отмечу ваш ответ как правильный ответ. См. мою обновленную скрипту здесь: jsfiddle.net/parikramatic/eWwPk/10 Далее я пытаюсь чтобы удалить элемент списка, отображая изображение при наведении, но оно добавляется к ‹li› и выглядит плохо при редактировании. Пожалуйста, взгляните, или я, вероятно, закончу тем, что задам другой вопрос. Спасибо за помощь! :) - person Freakishly; 28.12.2012
comment
@Причудливо добро пожаловать. Я посмотрел на вашу скрипку, но не могли бы вы уточнить, что вы пытаетесь сделать дальше? - person SubRed; 28.12.2012
comment
Здравствуйте, SubRed, я использую плагин fcbkcomplete: здесь у меня есть новый JSfiddle: jsfiddle.net/parikramatic/z4jpH Кажется, я ничего не могу сделать после добавления класса ui-state-default в событие остановки $(#sortable).sortable. Я пытаюсь скопировать только текст («выполнить») без каких-либо дополнительных украшений или полей ввода. - person Freakishly; 11.01.2013

arrow_upward
2
arrow_downward

Ваши события верны, но, как вы поняли, #draggable — это исходный элемент, а не клонированный. Один из способов получить ваш клонированный предмет — найти предмет с идентичными классами в сортируемом списке. Итак, вместо использования:

$("#draggable").attr('class', 'edit');

ты используешь:

$('#sortable .ui-draggable')
  .removeClass('ui-state-highlight ui-draggable')
  .addClass('ui-state-default edit');

Демо на JSFiddle

person Tyron    schedule 22.12.2012
comment
Спасибо за ответ, Тайрон. Я попробовал демо, и хотя вставленный элемент имеет новый визуальный класс, класс «редактирования» не применяется. - person Freakishly; 24.12.2012