Jquery Newbie Jquery Newbie - 3 years ago 138
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

, I can't select it anymore.

So here's my code:

$(document).ready(function() {

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

$(".object").click(function(event, ui) {


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

Answer Source

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

    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) {

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)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download