web-dev-qa-db-ja.com

Jquery UIは、並べ替えとドラッグが可能です

ドラッグ可能なパネル（上）と並べ替え可能なパネル（下）を組み合わせようとしています。

ドラッグは正常に機能しますが、並べ替えは失敗します。

これが私のJSフィドルです： http://jsfiddle.net/dmUKY/9/

ドラッグアンドドロップ関数と並べ替え可能な関数はどちらもdroppable:drop関数を共有しています。要素を並べ替えるとき、関数は選択されたオブジェクトを置き換える必要があります。

 drop: function (event, ui) {
    //alert($(this).parent().html());
    //alert($(ui.helper).attr('class'));
    var obj;
    if ($(ui.helper).hasClass('draggable')) {
        //alert('draggable');
      obj = $(ui.helper).clone();  
      obj.removeClass('draggable').addClass('editable')
      //obj.addClass('droppable');
      $(this).parent().append(obj);

    }


    //alert($(this).parent().html());
}

これら2つの機能をどのように組み合わせる必要がありますか？

jquerydraggablejquery-ui-sortablejquery-ui-draggable
7
dams

コードをこれに変更すると、うまくいくはずです。

obj.removeClass('draggable').addClass('editable').removeAttr('style');
//obj.addClass('droppable');
$(this).append(obj);

フィドルを確認してください： http://jsfiddle.net/dmUKY/11/

4
trrrrrrm
$("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
        if(!ui.item.data('tag') && !ui.item.data('handle')) {
            ui.item.data('tag', true);
            ui.item.fadeTo(400, 0.1);
        }
    }
});
$("#draggable").draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    revert: 'invalid'
});
$("ul, li").disableSelection();

DEMO JSFIDDLE

これがあなたが探していたものだと思います!!

17
Vaibs_Cool