javascript - 移动到可排序容器时如何控制可拖动 div 的克隆样式？

Question

我想做的是结合两个项目:

• > One is an example of draggable and sortable list-items
• > The other is jEditable, which I'm using to make the list-items editable

现在我可以毫不费力地将编辑类附加到第一个链接中的现有列表项。当我去创建一个新的可拖动项目(克隆)并将其移动到可排序列表时，我希望它采用旧项目的 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 is here

Answer 1

您实际上可以在可排序事件 stop 中使用 ui。下面是它们的简短定义:

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/