Jquery UI 结合了可排序和可拖动

Posted 2023-05-08

【中文标题】Jquery UI 结合了可排序和可拖动

【英文标题】：Jquery UI combine sortable and draggable

【发布时间】：2013-08-26 07:27:57

【问题描述】：

我正在尝试组合一个可拖动面板（顶部）和一个可排序面板（底部）。

拖动工作正常，但排序失败。

这是我的 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());

我应该如何结合这两个功能？

【参考方案1】：

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

我猜这就是你要找的东西！

【参考方案2】：

将您的代码更改为此应该可以解决问题：

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

检查小提琴：http://jsfiddle.net/dmUKY/11/

【讨论】：

谢谢！如果有 2 个单独的可排序区域，我该怎么办？我可以在它们之间交换物品吗？ JSfiddle：jsfiddle.net/dmUKY/11

ra_htial 是最好的:)