Question

我目前正在做一个可以通过调整大小拖放图像的Web应用程序。但是当我将克隆元素附加到#dropzone上时，我再也无法选择它了。

所以这是我的代码：

$(document).ready(function() {

    $(".draggable").draggable({
        helper: 'clone',
        cursor: 'move'
    });
    $("#dropzone").droppable({
        drop: function (event, ui) {
            var canvas = $(this);
            if (!ui.draggable.hasClass('object')) {
                var canvasElement = ui.helper.clone();
                canvasElement.addClass('object');
                canvasElement.removeClass('draggable ui-draggable ui-draggable-handle ui-draggable-dragging')
                canvas.append(canvasElement);
                canvasElement.draggable({
                    containment: '#garden',
                    stack:       canvasElement
                }).find("img").css({
                    'width':   50,
                    'height':  50
                }).resizable({
                    minWidth:  50, 
                    minHeight: 50,
                    containment:'#garden'
                });
                canvasElement.css({
                    left:     (ui.position.left),
                    top:      (ui.position.top),
                    position: 'absolute',
                    zIndex:   3                
                });
            } 
        } 
    });

    $(".object").click(function(event, ui) {
        alert("WOOOOO!");
        $(this).hide();
    });
});

.object上的点击功能无效。我不知道为什么。请帮忙。

Answer 1

如果您希望能够继续拖动克隆元素，则应将以下代码添加到#dropzone drop函数中：

canvasElement.draggable({
    cursor: 'move'
});

这是因为当执行了$（“。draggable”）。draggable时，你的新canvasElement还不存在，这也是你的click事件不起作用的原因，所以还要在你的#dropzone drop函数中添加以下内容：

canvasElement.click(function(event, ui) {
    alert("WOOOOO!");
});

如果你想在退出dropzone时做点什么，请查看以下帖子：jQuery draggable, event when dropped outside of parent div

（检查http://codepen.io/ptcardoso/pen/xErxJm）

不能选择我克隆的可拖动div

1 个答案: