1

私がやろうとしているのは、2 つのプロジェクトを結合することです。

これで、問題なく、最初のリンクの既存のリスト項目に編集クラスを追加できました。新しいドラッグ可能なアイテム (クローン) を作成し、それを並べ替え可能なリストに移動するときに、古いアイテムの 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

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 に答える
2

あなたのイベントは正しいですが、気づいたように、 #draggable は元のアイテムであり、複製されたものではありません。複製されたアイテムを取得する 1 つの方法は、並べ替え可能なリストで同一のクラスを持つアイテムを検索することです。したがって、使用する代わりに：

$("#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 に答える