jQueryUI 컨테이너 내에서 드래그 가능한 요소의 위치가 올바르지 않습니다.

Question

ID가 box-parent 인 div은 뷰포트를 기준으로 확대/축소됩니다. 내부에는 각각 sq-box 클래스가있는 많은 상자가 있습니다. 상자를 드래그하려고하면 위치가 올바르게 설정되지 않습니다. 상자 사이를 바꾸려고합니다. 상자를 움직이는 동안 올바른 위치를 얻는 방법이 있습니까?

CSS

#box-parent{ 
    border:1px solid black; 
    width:300px; 
    margin:40px auto; 
    font-size:0; 
    transform:scale(1.2); 
} 

.sq-box{ 
    display:inline-block; 
    font-size:20px; 
    height:50px; 
    width:50px; 
    border:1px solid green; 
    background-color:rgba(0,0,0,0.5); 
} 

자바 스크립트

$(".sq-box").draggable({ 
    appendTo: "#box-parent", 
    helper: "clone", 
    cursor: "move", 
    revert: "invalid" 
}); 

HTML 여기

<div id="box-parent"> 
    <div class="sq-box">1</div> 
    <div class="sq-box">2</div> 
    <div class="sq-box">3</div> 
    <div class="sq-box">4</div> 
    <div class="sq-box">5</div> 
    <div class="sq-box">6</div> 
    <div class="sq-box">1</div> 
    <div class="sq-box">2</div> 
    <div class="sq-box">3</div> 
    <div class="sq-box">4</div> 
    <div class="sq-box">5</div> 
    <div class="sq-box">6</div> 
    <div class="sq-box">1</div> 
    <div class="sq-box">2</div> 
    <div class="sq-box">3</div> 
    <div class="sq-box">4</div> 
    <div class="sq-box">5</div> 
    <div class="sq-box">6</div> 
    <div class="sq-box">1</div> 
    <div class="sq-box">2</div> 
    <div class="sq-box">3</div> 
    <div class="sq-box">4</div> 
    <div class="sq-box">5</div> 
    <div class="sq-box">6</div> 
</div> 

인 문제의 JSFiddle - https://jsfiddle.net/mhb35rnr/

Answer 1

희망이 ㅁ에 가까운 네가 바라는대로. 원하는 것을하기 위해서는 과 함께 draggable을 사용해야합니다. 끌기 및 크기 조정을 적용 할 때 transform-origin 및 position: absolute을 추가하면 jQuery 드래그 가능한 시각적 인공물을 해결할 수 있습니다.

Working JSFiddle

CSS

#box-parent{ 
    border:1px solid black; 
    width:300px; 
    font-size:0; 
    position: absolute; 
    transform-origin:top left; 
    transform:scale(1.2); 
} 

.sq-box{ 
    display:inline-block; 
    font-size:20px; 
    height:50px; 
    width:50px; 
    border:1px solid green; 
    background-color:rgba(0,0,0,0.5); 
} 

.ui-state-hover { 
    background: lightyellow; 
} 

.ui-state-active { 
    background: lightgray; 
} 

자바 스크립트

jQuery.fn.swap = function(b){ 
    // method from: http://blog.pengoworks.com/index.cfm/2008/9/24/A-quick-and-dirty-swap-method-for-jQuery 
    b = jQuery(b)[0]; 
    var a = this[0]; 
    var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
    b.parentNode.insertBefore(a, b); 
    t.parentNode.insertBefore(b, t); 
    t.parentNode.removeChild(t); 
    return this; 
}; 

$(".sq-box").draggable({ 
    connectToSortable: "#box-parent", 
    cursor: "move", 
    revert: "invalid", 
    helper: "clone" 
}); 

$(".sq-box").droppable({ 
    accept: ".sq-box", 
    activeClass: "ui-state-hover", 
    hoverClass: "ui-state-active", 
    drop: function(event, ui) { 

     var draggable = ui.draggable, droppable = $(this), 
      dragPos = draggable.position(), dropPos = droppable.position(); 

     draggable.css({ 
      left: dropPos.left+'px', 
      top: dropPos.top+'px' 
     }); 

     droppable.css({ 
      left: dragPos.left+'px', 
      top: dragPos.top+'px' 
     }); 
     draggable.swap(droppable); 
    } 
}); 

HTML

12,325,224,나는 내가 CSS는`박스 parent`에서 규모를 변형 제거 할 수 없습니다 .. 그럼이 existing SO answer.