Jquery przeciągalne(), klon(), aby dołączyć div ... Pls Fiddle mój jsfiddle

UPDATE:Jquery przeciągalne(), klon(), aby dołączyć div ... Pls Fiddle mój jsfiddle

http://jsfiddle.net/wJUHF/7/
Jest to zaktualizowana i skrzypce pracy dla każdego, kto może przeczytać.

Próbuję zrobić to jfiddle do pracy.

tutaj jest problem. Mogę przeciągnąć obraz do pojemnika. Dołącza klon, bez problemu. Kiedy klikam, aby przeciągnąć sklonowany obraz do pojemnika, działa on poprawnie za pierwszym razem. Po drugim kliknięciu, aby przeciągnąć, nie przeciąga, ale klonuje już sklonowany obraz. Aby lepiej zrozumieć, stworzyłem jsfiddle. proszę spojrzeć i daj mi znać, gdzie się tu mylę.

http://jsfiddle.net/wJUHF/

Dzięki

KOD:

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

Źródło

2013-08-28 n00bInNeed

Dzięki zapisaniu mój dzień. –

Trzeba tylko warunkowo do różnicowania się w przewodnika rozwijanego:

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

Źródło

2013-08-28 20:15:03

Pracowałem, dziękuję za pomoc :) Po dodaniu zaktualizowałem 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

Źródło

2013-08-28 20:42:12

Dzięki za pomoc i wysiłek. – n00bInNeed

Jquery przeciągalne(), klon(), aby dołączyć div ... Pls Fiddle mój jsfiddle

Odpowiedz

Powiązane problemy