Jquery draggable(), clone() div anhängen ... Pls Fiddle meine jsfiddle

UPDATE:Jquery draggable(), clone() div anhängen ... Pls Fiddle meine jsfiddle

http://jsfiddle.net/wJUHF/7/
Dies ist die aktualisierte und Arbeits Geige für alle, die diese Zeilen lesen kann.

Ich versuche, diese jfiddle zur Arbeit zu kommen.

hier ist, wo das Problem liegt. Ich kann das Bild in den Container ziehen. Es fügt einen Klon ohne Probleme an. Wenn ich klicke, um das geklonte Bild in den Container zu ziehen, funktioniert es beim ersten Mal richtig. Das zweite Mal, wenn ich ziehe, um zu ziehen, zieht es nicht, sondern klont das bereits geklonte Bild. Um es besser zu verstehen, habe ich eine Fidelity erstellt. Bitte schau und lass mich wissen, wo ich hier falsch liege.

http://jsfiddle.net/wJUHF/

Dank

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

Quelle

2013-08-28 n00bInNeed

Dank Sie meinen Tag retten. –

Sie müssen nur eine bedingte in der Drop-Handler unterscheiden:

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

Quelle

2013-08-28 20:15:03

Arbeitete, danke für die Hilfe :) Ich füge die aktualisierte jsfiddle sobald ich fertig bin. – 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

Quelle

2013-08-28 20:42:12

Danke für die Hilfe und Mühe. – n00bInNeed

Jquery draggable(), clone() div anhängen ... Pls Fiddle meine jsfiddle

Antwort

Verwandte Themen