jQuery的可拖動（），克隆（）將追加DIV ......請小提琴我的jsfiddle

UPDATE：jQuery的可拖動（），克隆（）將追加DIV ......請小提琴我的jsfiddle

http://jsfiddle.net/wJUHF/7/
這是更新和任何人可以讀取該工作提琴。

我想讓這jfiddle工作。

這裏是問題所在。我可以將圖像拖到容器中。它追加了一個克隆，沒有問題。當我點擊拖動容器中的克隆圖像時，它第一次正常工作。第二次點擊拖動，它不拖動，但克隆已克隆的圖像。爲了更好地理解，我創建了一個jsfiddle。請看看，讓我知道我在哪裏錯了。

http://jsfiddle.net/wJUHF/

感謝

CODE：

$(function(){ 
    //Make every clone image unique. 
    var counts = [0]; 
    $(".dragImg").draggable({ 
     helper: "clone", 
     //Create counter 
     start: function() { counts[0]++; } 
    }); 

    $("#dropHere").droppable({ 
     drop: function(e, ui){ 
      $(this).append($(ui.helper).clone()); 
      //Pointing to the dragImg class in dropHere and add new class. 
      $("#dropHere .dragImg").addClass("item-"+counts[0]); 
      //Remove the current class (ui-draggable and dragImg) 
      $("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging"); 
      //not working 100%   
      $(".item-"+counts[0]).dblclick(function(){ 
       $(this).remove(); 
      });  

      //make the div draggable --- Not working???  
      make_draggable($(".item-1"));    
     } 
    }); 

    var zIndex = 0; 
    function make_draggable(elements) 
    { 
     elements.draggable({ 
      containment:'parent', 
      start:function(e,ui){ ui.helper.css('z-index',++zIndex); }, 
      stop:function(e,ui){} 
     }); 
    } 
});

HTML：

<body> 
    <div class="dragImg"><img src="http://placehold.it/80x80"> 
    </div> 
    <div id="dropHere"></div> 
</body>

CSS：

#dropHere { 
    width:400px; 
    height: 400px; 
    border: dotted 1px black; 
}

來源

2013-08-28 n00bInNeed

感謝。 –

你只需要一個條件在下拉處理程序來區分：你救我的天

if(ui.draggable.hasClass("dragImg")) 
    $(this).append($(ui.helper).clone());

來源

2013-08-28 20:15:03

工作，感謝您的幫助:)我完成後添加更新的jsfiddle。 – n00bInNeed

jQuery(".dragImg").draggable({ 
     // use a helper-clone that is append to 'body' so is not 'contained' by a pane 
     helper: function() { 
      return jQuery(this).clone().appendTo('body').css({ 
       'zIndex': 5 
      }); 
     }, 
     cursor: 'move', 
     containment: "document" 
    });

SOLVED UR PROBLEM JSFIDDLE DEMO

來源

2013-08-28 20:42:12

感謝您的幫助和努力。 – n00bInNeed

jQuery的可拖動（），克隆（）將追加DIV ......請小提琴我的jsfiddle

回答

相關問題