Giao diện người dùng Jquery kết hợp có thể sắp xếp và có thể kéo

Question

Tôi đang cố gắng kết hợp bảng điều khiển có thể kéo (trên cùng) và bảng điều khiển có thể sắp xếp (dưới cùng).

Kéo hoạt động tốt, nhưng sắp xếp không thành công.

Đây là fiddle JS của tôi: http://jsfiddle.net/dmUKY/9/

Cả hai thả drag'n và sắp xếp được các chức năng chia sẻ droppable:drop chức năng. Khi sắp xếp các phần tử, hàm phải thay thế đối tượng đã chọn.

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()); 
} 

Tôi nên kết hợp hai chức năng này như thế nào?

Answer 1

Thay đổi mã của bạn để điều này sẽ làm các trick:

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

kiểm tra về fiddle: http://jsfiddle.net/dmUKY/11/

Answer 2

$("#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

Tôi đoán đây là những gì bạn đang tìm kiếm! !