当元素被拖动到另一个容器并捕捉到另一个容器时，如何强制 jquery 将其居中? [英] How do I force jquery to center an element when it is dragged to and snapped to another container?
问题描述
我想要一些方形的可拖动对象(在这种情况下只是 <td> 带有数字的框)能够捕捉到一些空的表格单元格并捕捉到那些的中心单元格(空 td 框)，而不是那些单元格的(外)边缘，这似乎是默认情况下所做的.
I want some square-shaped draggable objects (in this case just <td> boxes with numbers in them) to be able to snap to some empty table cells and snap to the center of those cells (empty td boxes), not the (outer) edge those cells, which is what is seems to do by default.
这是我的脚本.:
<script type="text/javascript">
$(document).ready(function () {
$(".inputs div").draggable( {
snap: ".spaces"
});
});
</script>
这是整个文件
<!DOCTYPE html>
<head>
<title>Draggable</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
<style>
.block {
z-index:9999;
cursor:move;
}
li {
list-style:none;
}
tr {
border: 2px solid black;
}
table {
border: 2px solid black;
}
.inputs div {
float:left;
background-color:#FFFFFF;
color:#004E66;
font-size:x-large;
margin:2px;
padding:20px;
border:1px solid black;
}
.spaces td {
background-color:#666666;
margin:2px;
padding:36px;
border:2px solid black;
}
</style>
</head>
<body>
<form id="form1">
<div class="inputs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<br/>
<table class="spaces">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
<!-- here we are telling jquery to make each element inside of class 'inputs' draggable -->
<script type="text/javascript">
$(document).ready(function () {
$(".inputs div").draggable( {
snap: ".spaces"
}).center();
});
</script>
<br/><表类=空格"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></表单><!-- 在这里，我们告诉 jquery 使类 'inputs' 中的每个元素都可拖动 --><script type="text/javascript">$(document).ready(function () {$(".inputs div").draggable( {快照:.spaces"}).中央();});
Here's a rough text-based illustration of what's going on
这是关于正在发生的事情的粗略的基于文本的说明
-----+---------+ XXXXXXXXXXX X| | | | Y x| | X| -----+-------+X| | X|
- 如果上面的框是最上面tr行右上角的td单元格
- 然后 X 是元素当前粘贴的位置(显然不是大，我只是展示它粘住的地方......实际上我已经删除了一些 X 显示它在到达某个位置后如何捕捉到角落一定接近它...)
- 基本上这个模型证明只有表的外边缘对可拖动元素具有重力".我真正想要的要做的是用 排斥 卡入 td 单元格到所有边缘，而不是对外界的吸引力.
- Y 是拖动元素所需的对齐位置.
- 最后出于演示原因，我希望元素卡入到位有某种过渡而不是突然的跳跃......
- if the above box is a td cell in the right corner of the topmost tr row
- then X is where the elements are currently sticking (obviously its not that large, I'm just showing the places where it sticks...actually I removed some of the X's to show how it snaps to the corner once it reaches a certain closeness to it...)
- basically this model demonstrates that only the external edges of the table have "gravity" with regards to the draggable element. What I really want it to do is snap into the td cells with repulsion to ALL the edges, not with attraction to the external ones.
- Y is the desired snap-to location for the dragged element.
- Lastly for presentation reasons I would want the element snap into place with some sort of transition rather than an abrupt jump...
推荐答案
我相信这就是您想要的.
I believe this is what you want.
如果你愿意，你显然可以改变定位，它更适合你的需求.
You can obviously change the positioning if you want and it suits your needs better.
演示在这里:DEMO
$(document).ready(function () {
$(".inputs div").draggable( {
opacity: .4,
create: function(){$(this).data('position',$(this).position())},
cursorAt:{left:15},
cursor:'move',
start:function(){$(this).stop(true,true)}
});
$('.spaces').find('td').droppable({
drop:function(event, ui){
snapToMiddle(ui.draggable,$(this));
}
});
});
function snapToMiddle(dragger, target){
var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
var leftMove= target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
dragger.animate({top:topMove,left:leftMove},{duration:600,easing:'easeOutBack'});
}
这篇关于当元素被拖动到另一个容器并捕捉到另一个容器时，如何强制 jquery 将其居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
