2013-08-28 17 views
11

GÜNCELLEME:jQuery sürüklenebilir(), klon() div eklemek için ... Pls Fiddle benim jsfiddle

http://jsfiddle.net/wJUHF/7/
Bu güncellenmiş ve bu okuyabilir herkes için keman çalışma.


Bu jfiddle işe almak için çalışıyorum. sorun burada yatıyor burada

olduğunu. Resmi kapsayıcıya sürükleyebilirim. Sorun olmadan bir klon ekler. Klonlanmış görüntüyü kapta sürüklemek için tıkladığımda ilk kez düzgün çalışıyor. Sürüklemek için ikinci kez tıklıyorum, sürüklemiyor ancak zaten klonlanmış görüntü klonlar. Daha iyi anlamak için bir jsfiddle oluşturdum. lütfen bir göz atın ve nerede yanlış gittiğimi bildirin.

http://jsfiddle.net/wJUHF/

Teşekkür

KODU:

$(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; 
} 
.210
+0

teşekkürler sen benim günü kurtarmak. –

cevap

4

sadece damla işleyicisindeki ayırt etmek koşullu gerekir:

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

Çalıştı, yardımın için teşekkürler :) İşler bittiğinde güncellenmiş jsfiddle ekle. – 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

Yardım ve çaba için teşekkürler. – n00bInNeed

İlgili konular