当拖动元素并将其捕捉到另一个容器时，如何强制jquery将元素居中？
我想要一些方形的可拖动物体（在这种情况下只是带有数字的
这是我的剧本：
$(document).ready(function () { $(".inputs div").draggable( { snap: ".spaces" }); });
编辑：这是整个文件
Draggable .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; } $(document).ready(function () { $(".inputs div").draggable( { snap: ".spaces" }).center(); });
这是一个粗略的基于文本的插图，说明正在发生的事情
----- + --------- +
XXXXXXXXXXX X |
| |
| Y x |
| X |
----- + ------- + X |
| X |
- 如果上面的框是最顶部tr行右角的td单元格
- 然后X是元素当前粘的地方（显然它不是那么大，我只是展示了它所坚持的地方……实际上我删除了一些X来展示它一旦达到一定的接近程度就会抓到角落它……）
- 基本上这个模型表明只有表的外边缘对于可拖动元素具有“重力”。 我真正想要它做的是捕捉到td细胞， 排斥所有的边缘，而不是对外部的吸引力。
- Y是拖动元素的所需捕捉位置。
- 最后，出于演示的原因，我希望元素在某种过渡而不是突然跳跃的情况下快速到位…
我相信这就是你想要的。
如果您愿意，您可以明显改变定位，更好地满足您的需求。
演示在这里： 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'}); }
关于snapToMiddle函数的一点说明：
为了让它适合我，我不得不将它改为>
function snapToMiddle(dragger, target){ var offset = target.offset(); var topMove = (target.outerHeight(true) - dragger.outerHeight(true)) / 2; var leftMove= (target.outerWidth(true) - dragger.outerWidth(true)) / 2; dragger.offset({ top: topMove + offset.top, left: leftMove + offset.left }) }
此外，我创建了一个数组，将拖动器与滴管相关联，并在窗口reSize上确保我的所有滴管都不会徘徊：
$( window ).resize(function() { for( i = 0 ; i < assc.length - 1 ; i++ ) { var drp = assc[i].drop; var drg = assc[i].drag; snapToMiddle(drg,drp); } });
我创造了一个解决你的问题的小提琴……有点（如果我理解正确）。
红色div在td s中居中，你可以与它们对齐。 只需删除边框，它就会显示为捕捉到td的中心。 .draggable的性质将导致拖动器同时捕捉到任何边缘而不是所有边缘。
如果这还不够，您可能必须为.stop实现一个调用处理程序，它根据您的期望调整元素的位置。
您需要指定与拖动元素大小相同的捕捉目标。 如果您的可拖动器总是大小相同，这不是什么大问题。 只需在单元格中添加一个空的，绝对定位的div，然后设置CSS，使其大小和居中正确。 然后，将snap选择器设置为该div。 要仅捕捉到捕捉目标的内部，请将snapMode设置为"inner" 。
$(".inputs div").draggable({ snap: ".spaces td div", snapMode: "inner" });
但是，如果可拖动的大小可能不同，则每次开始拖动元素时都需要resize并重新定位放置目标。 在可拖动的mousedown上执行此操作（使用mousedown因为dragstart太晚而且不起作用）：
$(".inputs div").draggable({ snap: ".spaces td div", snapMode: "inner", }).mousedown(function(){ var targets = $(".spaces td div"); targets.height(this.offsetHeight); targets.width(this.offsetWidth); targets.each(function(){ $(this).position({ of: this.parentNode }); }); });
在这些tds中添加一个div，并通过为tds和新添加的div提供固定的宽度和高度来居中。 然后跨越可拖动到这些div。
$(document).ready(function () { $('').appendTo('.spaces td'); $(".inputs div").draggable({ snap: ".spaces td div", snapMode:'inner' }); });
tds和div的css也如下。
.block { z-index:9999; cursor:move; } .productCode { } 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; width:80px; height:80px; border:2px solid black; } .spaces td div { margin:0 auto; width:50px; height:70px; }
如果我遇到了问题，请用以下内容替换当前脚本：
$(document).ready(function () { // create a bunch of invisible divs var divs = $(''); // make them 2/2 and add them to the existing tds divs.css({ width:'50%', float:'left' }).appendTo('.spaces td'); // snap to everything $(".inputs div").draggable({snap: ".spaces td, .spaces td div" }).center(); });
如果我不只是说，我会解决它。