1

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

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

4

2 回答 2

2

您的事件是正确的，但正如您所意识到的，#draggable 是原始项目，而不是克隆项目。获取克隆项目的一种方法是在可排序列表中搜索具有相同类的项目。所以不要使用：

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

你用：

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

JSFiddle 上的演示

于 2012-12-22T20:55:36.067 回答
2

您实际上可以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/

于 2012-12-22T21:22:29.007 回答