下面介绍一下使用jQuery如何拖动div并且将其放倒一个指定的位置,类似于在棋盘上挪动棋子的位置一下,代码摘抄于网络,感觉还算是不错,希望能够给有此需求的朋友带来一定的帮助,代码如下:
   [ jQuery ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>拖动挪动div代码实例-51前端</title>
<style type="text/css">
body, div{
  margin: 0;
  paading: 0;
  font-size: 12px;
}
ul, li{
  margin: 0;
  padding: 0;
  list-style: none;
}
.clear{
  clear: both;
  width: 1px;
  height: 0px;
  line-height: 0px;
  font-size: 1px;
}
.bor2{padding: 20px 0 0 0;}
.box{
  position: static;
  float: left;
  width: 200px;
  height: 800px;
  margin: 0 auto;
  margin-top: 15px;
}
.bor{
  position: static;
  width: 100px;
  height: 100px;
  margin: 0 0 5px 0;
  border: 1px solid #ccc;
  background: #ececec;
}
.borp{
  position: absolute;
  width: 100px;
  height: 80px;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #ececec;
}
.bg{
  float:left;
  width: 100px;
  height: 100px;
  margin: 8px 5px 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
}
.text2{width:200px;}
.bgColor{border: 1px dashed #f00;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  var move=false;
  var $bg=$(".bg"); 
  var initDiv,tarDiv,tarDivHalf=0,wHalf=0; //拖拽对象 目标对象 
  var initPos={x:0,y:0},relPos={x:0,y:0},temPos = {x:0,y:0}; 
  var dragPos={x1:0,x2:0,y1:0,y2:0};// 拖拽对象的四个坐标 
  var tarDivPos={x1:0,y1:0,x2:0,y2:0}; //目标对象的四个坐标 
  $(".bor").each(function(){ 
    $(this).mousedown(function(event){ 
      borSub=$(this).index(); 
      initDiv=$(".bor").eq(borSub); //拖拽对象 
      // 鼠标 与 目标元素的相对坐标 
      relPos.x=event.pageX-$(this).offset().left; 
      relPos.y=event.pageY-$(this).offset().top; 
      move = true; 
   }); 
   $(document).mousemove(function(event){ 
     if(!move){return false;} 
     // 下列代码是 if(move)的 程序 
     initDiv.removeClass("bor").addClass("borp"); 
     // 目标元素随鼠标移动的坐标 
     dragPos.x1 = event.pageX - relPos.x; 
     dragPos.y1 = event.pageY - relPos.y; 
     dragPos.x2 = dragPos.x1 + initDiv. innerWidth(); 
     dragPos.y2 = dragPos.y1 + initDiv. innerHeight(); 
     initDiv.css({ left: dragPos.x1 +'px', top: dragPos.y1 + 'px' }); 
     $bg.each(function() { 
       tarDiv = $(this); 
       // 目标对象的坐标 
       tarDivPos.x1 = tarDiv.offset().left; 
       tarDivPos.x2 = tarDivPos.x1 + tarDiv.width(); 
       tarDivPos.y1 = tarDiv.offset().top; 
       tarDivPos.y2 = tarDivPos.y1 + tarDiv.height(); 
       tarDivHalf = tarDiv.height()/2; //临时变量,以便于在if判断中使用 
       wHalf = tarDiv.width()/2; 
       if(dragPos.x2>=tarDivPos.x1+wHalf && dragPos.x2<=tarDivPos.x2+wHalf && dragPos.y2>=tarDivPos.y1+tarDivHalf && dragPos.y2<= tarDivPos.y2+tarDivHalf ){ 
         if(tarDiv.children().length >0 ) {return false;}// 解决重叠元素 移动到一个目标元素 
         tarDiv.removeClass("bg").addClass("bg bgColor"); 
       } 
       else{ 
         tarDiv.removeClass("bgColor"); 
       } 
     }); 
   }).mouseup (function(event) { 
     initDiv.appendTo($(".bgColor"));// 利用 apppendTo 方法 使拖动元素对象添加到指定的区域。 
     initDiv.removeClass("borp").addClass("bor").removeAttr("style"); //恢复拖拽对象初始的样式 
     move = false; 
   });
}); 
}); 
</script>
</head>
<body>
<div class="box">
  <div class="bor">bor1</div>
  <div class="bor">bor2</div>
  <div class="bor">bor3</div>
</div>
<div class="box2">
  <div class="bg" id="bg1"></div>
  <div class="bg" id="bg2"></div>
  <div class="bg" id="bg3"></div>
  <div class="bg" id="bg4"></div>
  <div class="bg" id="bg5"></div>
  <div class="bg" id="bg6"></div>
  <div class="bg" id="bg7"></div>
  <div class="bg" id="bg8"></div>
  <div class="bg" id="bg9"></div>
  <div class="bg" id="bg10"></div>
  <div class="bg" id="bg11"></div>
  <div class="bg" id="bg12"></div>
  <div class="bg" id="bg13"></div>
  <div class="bg" id="bg14"></div>
  <div class="bg" id="bg15"></div>
  <div class="bg" id="bg16"></div>
  <div class="bg" id="bg17"></div>
  <div class="bg" id="bg18"></div>
</div>
<div class="clear"></div>
</body>
</html>

代码描述:jQuery鼠标拖动 实现div放入方格。jQuery鼠标拖动实现div放入方格简单介绍



125 167



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到