当一个元素被拖动到另一个容器并被捕捉到该容器时，如何强制jquery将其居中

我相信这就是您想要的。

很明显，如果你愿意，你可以改变定位，它更适合你的需求。

演示在这里：演示

$(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 })
}

此外，我创建了一个数组，将dragger与滴管关联起来，在窗口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);
    }
});

http://jsfiddle.net/vtdhV/

我制造了一把小提琴来解决你的问题。。有点（如果我理解正确的话）。

红色的div位于td的中心，您可以捕捉到这些div。只需移除边界，它就会显示为捕捉到td的中心。.draggable的性质将导致可拖动对象捕捉到任何边，而不是同时捕捉到所有边。

如果这还不够，您可能需要为.stop实现一个调用处理程序，该处理程序根据您的期望调整元素的位置。

您需要指定一个与拖动元素大小相同的捕捉目标。如果你的抽屉总是一样大，那也没什么大不了的。只需在单元格中添加一个空的、绝对定位的div，然后设置CSS，使其大小和中心位置正确。然后，将snap选择器设置为div。要仅捕捉到捕捉目标的内部，请将snapMode设置为"inner"。

$(".inputs div").draggable({
    snap: ".spaces td div",
    snapMode: "inner"
});

但是，如果可拖动对象的大小可能不同，则每次开始拖动元素时，都需要调整放置目标的大小并重新居中。在鼠标拖动时执行此操作（使用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 });
    });
});

http://jsfiddle.net/gilly3/mPr3A/

在这些tds中添加一个div，并通过为tds和新添加的div提供固定的宽度和高度将其居中。然后跨过障碍物到达这些潜水艇。

$(document).ready(function () {
    $('<div></div>').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;
}

Fiddle演示-http://jsfiddle.net/nsjithin/u25Bs/1/

如果我解决了问题，请将当前脚本替换为：

$(document).ready(function () {
    // create a bunch of invisible divs
    var divs = $('<div></div><div></div><div></div><div></div>');
    // 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(); 
}); 

如果我不只是说，我会修复它。