jQuery UI Multiple Droppable-拖动整个div元素&克隆 [英] jQuery UI Multiple Droppable - drag whole div element & clone

问题描述

我刚刚开始使用jQuery UI将div拖动到表的列中.我有几个不同的可拖动div，它们内部具有不同的背景颜色和文本，我需要它们能够作为克隆克隆到放置区域.通过使用jQuery UI的示例购物车代码，这可以很好地工作，但是我已经对其进行了编辑，因此拖动了整个对象而不是仅拖动文本，但是由于某些原因，这消除了克隆功能，即使我有helper:clone. /p>

这是我的代码:

<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/

解决方案

不确定它是否正是您想要的，但这是您的一个很好的开始:

I've just started using jQuery UI to drag divs into a columns in a table. I have a couple different draggable divs with different background-colors and text inside them, and I need them to be able to dragged up to the drop area as a clone. This worked fine by using jQuery UI's example shopping cart code, but I've edited it so the whole object is dragged instead of just the text, but this then eliminates the clone functionality for some reason, even though I have helper:clone.

Here is my code:

<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>

Example column:

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

Draggable element:

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

It's essentially a timetable setup tool. Thank you for the help

Here is a jsFiddle for reference: http://jsfiddle.net/x5T4h/

解决方案

Not sure that it is exactly what you want, but here is a good start for your : http://jsfiddle.net/x5T4h/2/

Basically, I removed the second draggable object declaration, and I added clone function to duplicate your element inside drop event $( 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" );
        }
    });
});​

这篇关于jQuery UI Multiple Droppable-拖动整个div元素&克隆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！