如何在 jQuery UI 中使用 Draggable 和 Droppable 将拖动的 li 添加到可放置的 ui 中？

Posted 2023-05-08

【中文标题】如何在 jQuery UI 中使用 Draggable 和 Droppable 将拖动的 li 添加到可放置的 ui 中？

【英文标题】：How to append dragged li in to droppable ui using Draggable and Droppable in jQuery UI?

【发布时间】：2016-01-26 11:17:59

【问题描述】：

这就是我想要做的 HTML

<ul class="droppable">    </ul>
<ul  class="droppable">
<li class="draggable"> Item 1</>
<li class="draggable"> Item 2</>
</ul>

jQuery

 $(function () 
            $(".draggable").draggable();
            $(".droppable").droppable(
                drop: function (event, ui) 
                    alert("Dropped!");
                
            );
        );

我想将 li 拖到另一个 UL 中，而 li 必须附加到已删除的 UL 中。

【问题讨论】：

***.com/questions/1254665/… 感谢@Barry Pitman

【参考方案1】：

希望这会对你有所帮助。

演示：http://jsfiddle.net/x5T4h/519/

    $(function() 
$( ".drag li" ).each(function()
    $(this).draggable(
        helper: "clone"
    );
);

$( ".droppable" ).droppable(
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    accept: ":not(.ui-sortable-helper)",
    drop: function( event, ui ) 
        var targetElem = $(this).attr("id");
        $( ui.draggable ).clone().appendTo( this );
    
).sortable(
    items: "li:not(.placeholder)",
    sort: function() 
        $( this ).removeClass( "ui-state-default" );
    
);
);