jQueryUI 可拖动元素在容器内的位置不正确使用 css 缩放

Question

我有一个 ID 为 box-parent 的 div，它根据视口缩放 up/down。里面有许多盒子，每个盒子都有 sq-box class。当我尝试拖动这些框时，它们的位置设置不正确。我正在尝试在盒子之间交换。有没有办法在移动盒子的时候得到正确的位置？

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

希望这更接近您的期望。为了做你想做的事，你需要使用 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>

我从这里借了一些existing SO answer.

jQueryUI 可拖动元素在容器内的位置不正确使用 css 缩放

jQueryUI Draggable element's position not correct inside container is scaled using css

jquery

jquery-ui

jquery-ui-draggable