Jquery：在容器之间移动可拖动元素答案

【问题标题】：Jquery: Move a draggable element among containersJquery：在容器之间移动可拖动元素
【发布时间】：2015-02-02 08:44:56
【问题描述】：

在 JQuery 中，我试图将一个元素从 Draggable 拖动到具有多个单元格的 Droppable 表中，然后在这些单元格之间拖动元素，如本演示 http://fiddle.jshell.net/c6vL61fb/4/

但是，我遇到了一个问题，即该元素仅在从可拖动表格移动到可放置表格时才第一次自动定位，而在从一个单元格移动到另一个单元格之后则没有。我该如何解决这个问题。非常感谢。

HTML

<div id="products">
    <div class="ui-widget-content">
       <img id="photo1" class="product" src="http://s4.postimg.org/fh1l9dae1/high_tatras_min.jpg" width="96" height="72">            
    </div> 
</div>
<div id="cont">
    <p>Container</p>
    <table id="container" width="100%" border="1">
        <tr height="100px">
            <td id='hello1' class='hello ui-widget-content' width="50%">&nbsp;</td>
            <td id='hello2' class='hello ui-widget-content' width="50%">&nbsp;</td>
        </tr>
        <tr height="100px">
            <td id='hello3' class='hello ui-widget-content' width="50%">&nbsp;</td>
            <td id='hello4' class='hello ui-widget-content' width="50%">&nbsp;</td>
        </tr>
    </table>
</div>

Javascript

$(function () {
    $(".hello")
    .droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            var self = $(this);
            var productid = ui.draggable.attr("id");
            if (self.find("[id=" + productid + "]").length) return;                    

            $(this).append($(ui.draggable).clone());

            var cartid = self.closest('.hello').attr('id');
            $(".hello:not(#"+cartid+") [id="+productid+"]").remove();

        }
    })
    .sortable();

    $(".product").draggable({
        appendTo: 'body',
        helper: 'clone'
    });
});

【问题讨论】：

标签： jquery html css draggable droppable

【解决方案1】：

您只需要在删除元素时删除样式。所以下面一行：

$(this).append($(ui.draggable).clone());

必须改为

$(this).append($(ui.draggable).clone().removeAttr('style'));

Here is your updated demo

【讨论】：

哦，太好了。谢谢。