Jquery Drag and Drop Проблемы с позицией, помогите!

Question

У меня проблемы с перетаскиванием, позиционированием в jquery.

Вот то, чего я пытаюсь достичь:

1. Вы перетаскиваете клон div в другой div, который является "стадией"
2. Мне нужно расположитьклона, а не оригинала

Вот моя попытка до сих пор:

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

Я сделал это для Chrome, вы должны сделать это кросс-браузер:

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

Answer 2

Я думаю, вы должны реализовать это на переключателе вместо перетаскиваемого

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