jquery-ui - jQuery UI Multiple Droppable - 拖动整个 div 元素并克隆

Question

我刚刚开始使用 jQuery UI 将 div 拖到表中的列中。我有几个不同的可拖动 div，其中有不同的背景颜色和文本，并且我需要它们能够作为克隆拖动到放置区域。通过使用 jQuery UI 的示例购物车代码，效果很好，但我对其进行了编辑，以便拖动整个对象而不仅仅是文本，但这会出于某种原因消除克隆功能，即使我有 helper:clone.

这是我的代码:

<script>
$(function() {
    $( "ul li" ).draggable({
        appendTo: "body",
        helper: "clone"});
    $( ".day #drag" ).draggable({
        appendTo: "body"});
    $( ".day" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            var targetElem = $(this).attr("id");

            $( this ).addClass( "ui-state-highlight" );
            $( ui.draggable ).appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});
</script>

示例列:

<td>
   <div id="monday" class="day monday ui-widget-content"></div>
</td>

可拖动元素:

<li><div style="background-color:#<?=$bgColor?>;color:<?=$textColor?>;" id="drag" class="<?=$subject?>"><?=$row['name']?></div></li>

它本质上是一个时间表设置工具。谢谢您的帮助

这里有一个jsFiddle可供引用:http://jsfiddle.net/x5T4h/

Answer 1

不确定这是否正是您想要的，但这对您来说是一个好的开始:http://jsfiddle.net/x5T4h/2/

基本上，我删除了第二个 draggable 对象声明，并添加了克隆函数来复制 drop 事件 $( ui.draggable ).clone 中的元素().appendTo( this );

$(function() {
    $( "ul li" ).each(function(){
        $(this).draggable({
            helper: "clone"
        });
    });

    $( ".day" ).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" );
        }
    });
});​