4

我想要一些方形的可拖动对象（在这种情况下只是<td>带有数字的框）能够捕捉到一些空的表格单元格并捕捉到这些单元格的中心（空的 td 框），而不是那些（外）边缘细胞，这似乎是默认情况下所做的。

这是我的脚本：

<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>

这是一个粗略的基于文本的说明，说明正在发生的事情

-----+----------+
XXXXXXXXXXXX X|
     | |
     | 是 x|
     | X|
-----+-------+X|
     | X|
  • 如果上面的框是最上面 tr 行右上角的 td 单元格
  • 然后 X 是元素当前粘贴的位置（显然它不是那么大，我只是显示它粘贴的地方......实际上我删除了一些 X 以显示它在达到一定的接近度后如何捕捉到角落对它...）
  • 基本上这个模型表明只有表格的外部边缘对于可拖动元素具有“重力”。我真正想要它做的是咬入 td 细胞，排斥所有边缘，而不是吸引外部边缘。
  • Y 是拖动元素所需的对齐位置。
  • 最后，出于演示的原因，我希望元素通过某种过渡而不是突然的跳跃来卡入到位......
4

6 回答 6

12

我相信这就是你想要的。

如果您愿意，您显然可以更改定位，它更适合您的需求。

演示在这里：演示

$(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'});
}
于 2012-07-11T19:51:50.970 回答
6

关于 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 })
}

另外，我创建了一个将拖动器与滴管相关联的数组，并且在窗口调整大小时，我确保我的所有滴管都不会偏离：

$( window ).resize(function() {
    for( i = 0 ; i < assc.length - 1 ; i++ )
    {
        var drp = assc[i].drop;
        var drg = assc[i].drag;
        snapToMiddle(drg,drp);
    }
});
于 2015-03-25T15:29:08.347 回答
2

http://jsfiddle.net/vtdhV/

我创建了一个可以解决您的问题的小提琴......有点（如果我理解正确的话）。

红色的 div 在tds 中居中，您可以捕捉到它们。只需删除边框，它似乎会捕捉到 td 的中心。的性质.draggable将导致可拖动对象捕捉到任何边缘而不是同时捕捉所有边缘。

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

于 2012-07-11T06:08:14.847 回答
1

您需要指定与拖动元素大小相同的捕捉目标。如果您的可拖动对象始终大小相同，这没什么大不了的。只需在您的单元格中添加一个空的、绝对定位的 div，并设置您的 CSS，使其大小和居中正确。然后，将您的snap选择器设置为该 div。要仅捕捉到捕捉目标的内部，请将您的设置snapMode为"inner".

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

但是，如果您的可拖动元素的大小可能不同，则每次开始拖动元素时都需要调整放置目标的大小并使其居中。在可拖动的 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 });
    });
});

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

于 2012-07-11T20:09:20.953 回答
0

在这些 td 中添加一个 div 并通过为 td 和新添加的 div 提供固定的宽度和高度来将其居中。然后将可拖动对象扩展到这些 div。

$(document).ready(function () {
    $('<div></div>').appendTo('.spaces td');
    $(".inputs div").draggable({
        snap: ".spaces td div",
        snapMode:'inner'
    });  
});

tds 和 divs 的 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;
}

小提琴演示 - http://jsfiddle.net/nsjithin/u25Bs/1/

于 2012-07-11T08:45:16.553 回答
-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(); 

});

如果我不只是说，我会解决它。

于 2012-07-11T06:00:26.977 回答