Jquery Newbie Jquery Newbie - 1 month ago 6
Javascript Question

Cant select my cloned draggable div

I'm currently doing a Web App that can drag and drop image with resize.
But when I append the cloned element on the

#dropzone
, I can't select it anymore.

So here's my code:

$(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();

});
});


my click function on
.object
isn't working. I dont know why. Please help.

Answer

If you want to be able to keep dragging the cloned element, you should add the following code to your #dropzone drop function:

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

This is because when $(".draggable").draggable was executed your new canvasElement didn't exist yet and that's also why your click event doesn't work, so also add the following to your #dropzone drop function:

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

If you want to do something when you drop out of the dropzone check out this thread: jQuery draggable, event when dropped outside of parent div

(check http://codepen.io/ptcardoso/pen/xErxJm)

Comments