2013-08-28 11 views
11

UPDATE:jQueryのドラッグ()、クローン()div要素を追加するには... Plsのフィドル私jsfiddle

http://jsfiddle.net/wJUHF/7/
これで更新され、これを読んでも、誰のためのフィドルの作業。


私はこのjfiddleを動作させようとしています。

ここに問題があります。イメージをコンテナにドラッグできます。それは問題なくクローンを追加します。クローンされたイメージをコンテナにドラッグしてドラッグすると、初めて正しく動作します。 2回目にクリックしてドラッグすると、ドラッグされませんが、すでにクローンされているイメージをクローンします。わかりやすくするために、私は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; 
} 
+0

感謝を。 –

答えて

4

あなただけのドロップハンドラで区別するために、条件を必要とする:あなたは私の一日保存

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

働いて、助けてくれてありがとう:いったん完了したら、私は更新されたjsfiddleを追加します。 – n00bInNeed

4
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

+0

お手数をおかけしていただきありがとうございます。 – n00bInNeed

関連する問題