끌어서 놓기 jquery xy 위치 가져 오기

Question

asp.net을 사용하여 끌어서 놓기 웹 응용 프로그램을 만들고 있습니다.

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

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

, 제 2 패널 (IMG A..E)의 모든 이미지가 단계에서 드래그 할 수 있습니다

이 내 샘플 레이아웃입니다. 이제 문제는 스테이지의 왼쪽 상단에있는 이미지를 드래그 할 때마다입니다. 이 내 코드의 소스

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

입니다 :이 단계에 대한 나의 CSS입니다

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

}); 

:

이것은 드래그 앤 드롭 내 코드입니다 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/