ドラッグ可能なパネル(上)と並べ替え可能なパネル(下)を組み合わせようとしています。
ドラッグは正常に機能しますが、並べ替えは失敗します。
これが私の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つの機能をどのように組み合わせる必要がありますか?
コードをこれに変更すると、うまくいくはずです。
obj.removeClass('draggable').addClass('editable').removeAttr('style');
//obj.addClass('droppable');
$(this).append(obj);
フィドルを確認してください: http://jsfiddle.net/dmUKY/11/
$("#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();
これがあなたが探していたものだと思います!!