Question

我想将一个图像框拖动到Droppable（表格），之后更改图像源，如本例http://fiddle.jshell.net/c6vL61fb/7/中所示，但是存在问题。

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

如果我没有设置ui clone $（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;
}

Answer 1

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

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

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

可拖动克隆问题

1 个答案: