我有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/
答案 0 :(得分:0)
希望这更接近你所希望的。为了做你想做的事,你需要使用draggable
和droppable
。请注意添加transform-origin
和position: absolute
以在应用拖动和缩放时解决jQuery可拖动的可视化工件。
<强> 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>
借了一些