如何在将元素拖动并拖动到另一个容器时强制使jquery居中？

更新时间：2023-01-05 08:54:48

我相信这是你想要的。

您可以根据需要更改定位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'});
}

上一篇 : ：iOS错误:“项目"没有可见的@interface声明选择器"alloc"下一篇 : Modaldialog没有反应进入/ esc

如何在将元素拖动并拖动到另一个容器时强制使jquery居中？

相关阅读

技术问答最新文章