Jquery UI組合可排序和可拖動

我試圖結合可拖動面板（頂部）和可排序面板（底部）。Jquery UI組合可排序和可拖動

拖動工作正常，但排序失敗。

兩個drag'n下降和排序功能共享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()); 
}

我應該如何結合這兩個功能？

來源

2013-08-23 dams

你的代碼改成這樣應該做的伎倆：在小提琴

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

檢查：http://jsfiddle.net/dmUKY/11/

來源

2013-08-23 09:47:34 trrrrrrm

謝謝！如果有兩個單獨的可排序區域，我應該怎麼做？我可以在這些之間交換物品嗎？ JSfiddle：http://jsfiddle.net/dmUKY/11/ – dams

更新後的鏈接：http://jsfiddle.net/dmUKY/16/ – dams

試試這個http://jsfiddle.net/dmUKY/18/ – 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

我猜這就是你要找的人！！

來源

2013-08-23 09:53:56

Jquery UI組合可排序和可拖動

回答

相關問題