可拖动克隆问题

Question

我想将一个图像框拖到 Droppable（table），然后像本例中那样更改图像源 http://fiddle.jshell.net/c6vL61fb/7/ 但是有一个问题。

如果我将 ui clone 设置为 true $(ui.draggable).clone(true) 然后在图像被拖动后，我可以点击 link (ui-图标文件夹打开）。但是，当我四处移动拖放的图像时，将拖动原始图像而不是复制的图像。

如果我不设置 ui clone $(ui.draggable).clone() 那么拖动后，link 是不可点击的，虽然复制的图像可以四处走动。

我也试过 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;
}

Answer 1

尝试克隆而不通过 'true'，并将事件添加到文档中：

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

Fiddle: http://fiddle.jshell.net/ucf83mp2/

可拖动克隆问题

Draggable clone issue

jquery

html

drag-and-drop

onclick