드롭 가능한 요소 위치가 잘못 계산됩니다.

Question

클래스가있는 테이블이 있습니다 : .screens, 셀은 삭제 가능합니다. 셀의 목록에서 항목을 드래그 할 수 있습니다. 또한 사용자가 항목을 삭제 한 위치를 계산하여 올바른 위치에 표시하려고합니다. 그러나 사용자가 첫 번째 셀을 제외한 셀에 항목을 놓으려고하면 드롭 위치가 잘못 계산됩니다. 이 계산을위한 코드는 다음과 같습니다.

var pos = ui.draggable.offset(), dPos = $(this).offset(); 
var droppedTop = ui.position.top - $(this).offset().top + $('#mainContainer').scrollTop(); 
var droppedLeft = ui.position.left - $(this).offset().left + $('#mainContainer').scrollLeft(); 

그런 다음 드롭 된 항목에 위 및 왼쪽 위치를 할당합니다. 이 코드는 테이블이 없지만 div 만 있으면 완벽하게 작동합니다. 바이올린은 다음과 같습니다 : https://jsfiddle.net/vaxobasilidze/moafzcx8/2/ 항목을 테이블로 드래그 앤 드롭하여 문제를 확인하십시오. 어떤 아이디어가 이것을 고치는 방법?

Answer 1

https://jsfiddle.net/Twisty/bwpcph7z/4/가 나는 해결책을 찾아 냈다. 조금 까다 롭지만 잘 작동합니다. 핵심은 드롭 타겟 셀의 X와 Y 인덱스를 잡아 내고, 그 전에 각 셀의 너비와 높이가 무엇인지 알아 내고이 값을 드롭 위치에 추가하는 것입니다.

var cellIndexX = event.target.cellIndex; 
var cellIndexY = event.target.parentNode.rowIndex; 
var positioningX = cellIndexX*($('#0-0').width()); 
var positioningY = cellIndexY*($('#0-0').height()); 

는 다음과 같이 positionX 및 positionY을 추가합니다 :

var pos = ui.draggable.offset(), dPos = $(this).offset(); 
var droppedTop = ui.position.top - $(this).offset().top + $('#mainContainer').scrollTop()+positioningY; 
var droppedLeft = ui.position.left - $(this).offset().left + $('#mainContainer').scrollLeft()+positioningX; 

Answer 2

전반적으로 무엇을하려하는지 명확하지 않습니다. jQuery UI .position()을 사용하여 항목을 셀에 배치하는 데 도움이 될 것입니다. 당신의 drop이를 고려

var $dz = $(this); 
    var fCount = $dz.find(".foo").length; 
    var $item = ui.draggable.appendTo($dz); 
    var padTop = 5; 
    if (fCount === 0) { 
     $item.position({ 
     my: "center top", 
     at: "center top+" + padTop, 
     of: $dz 
     }); 
    } else { 
     var jump = fCount * 42; 
     $item.position({ 
     my: "center top", 
     at: "center top+" + (jump + padTop), 
     of: $dz 
     }); 
    } 

는이 항목을 추가하고 또한 세포 내부를 배치합니다. 이점은 부모 셀에 상대적으로 항목을 쉽게 배치하고 오프셋 등을 처리하지 않아도된다는 것입니다.

근무 예 :