私の複製されたドラッグ可能なdivを選択します

Question

私は現在、サイズ変更で画像をドラッグアンドドロップできるWebアプリケーションをやっています。 しかし、クローンした要素を#dropzoneに追加すると、それ以上選択することはできません。

だからここに私のコードです：.object上

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

私のクリック機能が動作していません。どうしてか分かりません。助けてください。

Answer 1

あなたはクローン化された要素をドラッグしておくことができるようにしたい場合は、あなたがあなたの#dropzoneドロップ機能に次のコードを追加する必要がありますので、$（「ドラッグ」）

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

これはドラッグ可能。

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

あなたがドロップしたときに何かをしたい場合は、次の新しいcanvasElementがまだ存在していなかったし、あなたのクリックイベントが動作しない理由でもありますので、またあなたの#dropzoneドロップ機能に以下を追加実行されましたDropzoneからこのスレッドをチェックアウトしてください：jQuery draggable, event when dropped outside of parent div

は（http://codepen.io/ptcardoso/pen/xErxJmを確認してください）