可拖动克隆问题答案

【问题标题】：Draggable clone issue可拖动克隆问题
【发布时间】：2015-02-16 10:33:52
【问题描述】：

我想将图像框拖到 Droppable（表格）中，然后更改图像源，如本例 http://fiddle.jshell.net/c6vL61fb/7/ 所示，但出现了问题。

如果我将 ui clone 设置为 true $(ui.draggable).clone(true)，那么在拖动图像后，我可以点击链接（ui-icon-folder-open）。但是，当我移动放置的图像时，会拖动原始图像而不是复制的图像。

如果我不设置 ui 克隆 $(ui.draggable).clone() 则在拖动后，链接不可点击，但复制的图像可以移动。

我也尝试过使用 ui.helper.clone。那并没有解决问题。

我该如何解决这个问题？非常感谢您。

HTML

<div id="products">
        <p>Toolbox</p>
        <div id="photo" class="product ui-widget-content">
            <img src="http://s29.postimg.org/b347myz5f/Pictures_icon.png" width="96" height="96"></img>
            <a href="#" title="Change Image" class="ui-icon ui-icon-folder-open">Change Image</a>
        </div>
    </div>
    <br>
    <br>
    <div id="cont">
        <p>Drop Here</p>
        <table id="container" width="100%" border="1">
            <tr height="100px">
                <td id='cell1' class='cell ui-widget-content' width="50%">&nbsp;</td>
                <td id='cell2' class='cell ui-widget-content' width="50%">&nbsp;</td>
            </tr>
            <tr height="100px">
                <td id='cell3' class='cell ui-widget-content' width="50%">&nbsp;</td>
                <td id='cell4' class='cell ui-widget-content' width="50%">&nbsp;</td>
            </tr>
        </table>
    </div>

Javascript

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


            $(this).append($(ui.draggable).clone(true)
                           .attr('id',ui.draggable.attr('id')+cnt)
                           .removeAttr('style'));                   

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

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

    // resolve the icons behavior with event delegation
    var $img_target = "";           
    $(".product").click(function(event){    
        var $item = $(this),
            $target = $(event.target);

        if ($target.is("a.ui-icon-folder-open")){ 
            alert('hi');
        }
        return false;
    });         
});

CSS

#products{
    display: inline-block;
}
.product {
    float: left;
    padding: 0.4em; 
    margin: 0 0.4em 0.4em 0;
}
#products .product a {
    display: none;
}
.product img {
    cursor: move;
}

【问题讨论】：

标签： jquery html drag-and-drop onclick

【解决方案1】：

尝试在不传递'true'的情况下进行克隆，并将事件添加到文档中：

$(document).on('click', '.product', function(event){ ... }

小提琴：http://fiddle.jshell.net/ucf83mp2/

【讨论】：

非常感谢 Elas 的回答。这样可行。有点好奇，有没有另一种方法可以克隆点击事件？因为我认为当允许克隆事件时，单击事件应该是可复制的。