получить xy положение перетаскивания jQuery

Question

Я создаю перетаскивание веб-приложения с помощью asp.net.

это мой образец макета:

+----------------------------------------------------+ 
|             | 
|             | 
|             | 
|             | 
|     STAGE DROP AREA     | 
|             | 
|             | 
|             | 
|             | 
+----------------------------------------------------+ 

+----------------------------------------------------+ 
| +------+ +------+ +------+ +------+ +------+ | 
|< |IMG A | |IMG B | |IMG C | |IMG D | |IMG E | >| 
| +------+ +------+ +------+ +------+ +------+ | 
+----------------------------------------------------+ 

Все изображения во второй панели (IMG A..E) являются перетаскиваемым на стадии. Моя проблема теперь - это каждый раз, когда я перетаскиваю изображение, которое он сначала просматривает в верхнем левом углу сцены.

Это мой код для перетаскивания:

$(document).ready(function() { 
    $(".Images").draggable({ 
    helper: 'clone', 
    scroll: false 
}); 

$("#stage").droppable({ 
    accept: ".Images", 
    drop: function (event, ui) { 
     if ($(ui.draggable).hasClass('copied')) return 
     var droppedItem = $(ui.draggable).clone().addClass('copied'); 
     droppedItem.draggable({ 
      containment: "#stage" 
     }); 
     $(this).append(droppedItem); 
    } 
}); 

}); 

это мой CSS для сцены:

.stageCSS{ 
position:absolute; 
width:640px; 
height:376px; 
top: 124px; 
left: 84px; 
} 

это источник моего кода: http://jsfiddle.net/IrvinDominin/ufHMm/

Answer 1

Если я правильно поняли, вы хотели бы удалить элементы внутри поля в точную позицию вашего курсора.

Для этого добавьте абсолютное позиционирование к позициям, относительное позиционирование в контейнере, вычислите координаты, чем задайте свойства верхнего и левого css элементов.

Jquery:

... 
    $(this).append(droppedItem); 
    var posX = ui.offset.left - $(this).offset().left; 
    var posY = ui.offset.top - $(this).offset().top; 
    droppedItem.css("left", posX); 
    droppedItem.css("top",posY); 
    ... 

Css:

.box { 
    width:500px; 
    height:500px; 
    background: orange; 
    position: relative;  
} 
.copied 
{ 
    position: absolute; 
} 

Рабочая Демо: http://jsfiddle.net/er144/3Hay4/