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

时间:2017-02-27 20:09:28

标签: jquery jquery-ui jquery-ui-draggable

我有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/

1 个答案:

答案 0 :(得分:0)

希望这更接近你所希望的。为了做你想做的事,你需要使用draggabledroppable。请注意添加transform-originposition: 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.

借了一些