jQueryUIコンテナ内のドラッグ可能な要素の位置がCSSでスケールされていません

Question

divのidがbox-parentで、ビューポートに基づいて拡大/縮小されています。内部にはそれぞれ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); 
} 

はJavaScript

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

うまくいけば、これはWHに近いですあなたが望んでいるときに。あなたが望むことをするには、draggableにdroppableをつけてください。ドラッグとスケーリングが適用されたときに、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; 
} 

はJavaScript

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

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

私はまあ..私はCSSは `ボックスparent`からスケールを変換削除することはできません。このexisting SO answer.