如何在将元素拖动并拖动到另一个容器时强制使jquery居中？ [英] How do I force jquery to center an element when it is dragged to and snapped to another container?
本文介绍了如何在将元素拖动并拖动到另一个容器时强制使jquery居中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要一些方形的可拖动对象（在这种情况下只是< td> 框中带有数字）能够捕捉到一些空表格单元格，捕捉到那些单元格的中心（空的td框），而不是（外）边缘那些单元格，这是默认情况下做的是什么。
这里是我的脚本。：
< script type =text / javascript>
$（document）.ready（function（）{
$（。inputs div）。draggable（{
snap：.spaces
}）;
}）;
< / script>
编辑：这是整个文件
<！DOCTYPE html>
< head>
< title> Draggable< / title>
< script type =text / javascriptsrc =jquery-1.7.2.min.js>< / script>
< script type =text / javascriptsrc =jquery-ui-1.8.21.custom.min.js>< / script>
< script type =text / javascriptsrc =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>
<！ - 这里我们告诉jquery使每个元素在类'inputs'中draggable - >
< script type =text / javascript>
$（document）.ready（function（）{
$（。inputs div）。draggable（{
snap：.spaces
}）。center ）;
}）;
< / script>
这里是一个基于文本的粗略说明。
----- + --------- +
XXXXXXXXXXX X |
| |
| Y x |
| X |
----- + ------- + X |
| X |
- 如果上述框是最顶端tr行右侧的td单元格
- 然后X是元素当前粘贴的位置（显然它不是
大，我只是显示它粘贴的地方...实际上我删除
一些X显示它如何捕捉到角落一旦它达到
一定的接近...） - 基本上这个模型表明只有表的外部边缘
对于可拖动元素具有重力。我真正想要的
做的是用排斥到所有的边缘，而不是
吸引到外部td细胞。 $ b $ - 最后，为了演示的原因，我想要元素捕捉到
与某种转换，而不是...
解决方案
我相信这是你想要的。
您可以根据需要更改定位href =http://jsfiddle.net/jeschafe/JTKBR/> 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 b $ b 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'}）;
}
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.
Here's my script.:
<script type="text/javascript">
$(document).ready(function () {
$(".inputs div").draggable( {
snap: ".spaces"
});
});
</script>
EDIT: Here is the entire file
<!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>
Here's a rough text-based illustration of what's going on
-----+---------+
XXXXXXXXXXX X|
| |
| Y x|
| X|
-----+-------+X|
| X|
- 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 is here: 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屋！
查看全文
