Jquery Glisser et déposer des problèmes avec la position, aide!

Question

J'ai quelques problèmes avec drag, drop et positionnement dans jquery.

Voici ce que je suis en train de réaliser:

1. Vous faites glisser un clone d'un div à un autre div qui est la « scène »
2. je dois position du clone et non l'
d'origine

Voici ma tentative à ce jour:

$(function() { 

$("#workspacemaster").droppable({ 
accept: '.draggable', 
drop: function(event, ui) 
{ 
} 

}); 

// Make images draggable. 
$("#draggable1").draggable({ 

    // Find original position of dragged image. 
    start: function(event, ui) { 

     // Show start dragged position of image. 
     var Startpos = $(this).position(); 
     $("div#start1").text("1 START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top); 
    }, 
    cursor: 'move', 
    grid: [20, 20], 

    // Find position where image is dropped. 
    stop: function(event, ui) { 

     // Show dropped position. 
     var Stoppos = $(this).position(); 
     $("div#stop1").text("1 STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top); 
    } 
}); 

}); 

Answer 1

Je pense que vous devriez mettre en œuvre ce sur la largable au lieu du draggable

$('#workspacemaster').droppable({ 
    accept: '.draggable', 
    drop: function(event, ui){ 
    //do something with $(ui.helper) or $(ui.draggable); 
    // this is scoped to the droppable 
    } 
}); 

Answer 2

Je l'ai fait pour le chrome, vous êtes Ganna doivent faire cross-browser:

$(".draggable").draggable({ 
    helper:"clone", 
    //this will take whatever css you have for .draggable and add opacity 
    opacity:0.7 
}); 


$('#workspacemaster').droppable(
    { 
    accept: ".pageControl", 
    drop: function(e,ui){ 
     $(this).append(
     $(ui.draggable).clone() 
     .css({ 
      position:"absolute", 
      top: e.clientY-e.offsetY, 
      left: e.clientX-e.offsetX 
     }) 
     .draggable({containment:"parent"}) 
    ); 
    } 
    } 
);