マウスドラッグインプリメンテーションdivをグリッドインスタンスコードに挿入

5934 ワード

マウスドラッグ実装divをグリッドインスタンスコードに入れる:jQueryを使用してdivをドラッグして指定した位置を倒す方法を紹介します.碁盤上で駒を動かす位置に似ています.コードはネットワークから抜粋されています.いい感じですが、このニーズのある友达に一定の助けを与えたいと思っています.コードは以下の通りです.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>    div    -    </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>

以上のコードでは、左側のdivを任意の右側のdivにドラッグできます.
原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=9222
詳細については、次の項目を参照してください.http://www.softwhy.com/jquery/