拖拽到指定区域内的效果

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：editor 阅读 220 次

这个可与前两个不同了，这个是拖拽到指定的区域内的特效。其实逻辑方式差不多，只不过不同的是找到目标元素，用appendTo的方法插入到目标元素。具体的代码如下，有兴趣者可以试下。（由于是初学，做的简单

这个可与前两个不同了，这个是拖拽到指定的区域内的特效。其实逻辑方式差不多，只不过不同的是 找到目标元素，用appendTo 的方法插入到目标元素。

具体的代码如下，有兴趣者可以试下。（由于是初学，做的简单，如果有其他的方法请给下指点，我定感激不尽哈。。。）

&lt;!DOCTYPE HTML&gt;  &lt;html&gt;  &lt;head&gt;  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;  &lt;title&gt;测试的拖拽功能&lt;/title&gt;  &lt;style type="text/css"&gt;  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; }    &lt;/style&gt;  &lt;script type="text/javascript" src="jquery-1.6.1.min.js"&gt;&lt;/script&gt;  &lt;script type="text/javascript"&gt;    $(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 &gt;= tarDivPos.x1 + wHalf &amp;&amp; dragPos.x2 &lt;= tarDivPos.x2 + wHalf &amp;&amp; dragPos.y2 &gt;= tarDivPos.y1 + tarDivHalf &amp;&amp; dragPos.y2  &lt;= tarDivPos.y2 + tarDivHalf ) {                      if(tarDiv.children().length &gt;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;              });                });  });    &lt;/script&gt;  &lt;/head&gt;    &lt;body&gt;      &lt;div class="box"&gt;      &lt;div class="bor"&gt;bor1&lt;/div&gt;      &lt;div class="bor"&gt;bor2&lt;/div&gt;      &lt;div class="bor"&gt;bor3&lt;/div&gt;  &lt;/div&gt;    &lt;div class="box2"&gt;  &lt;div class="bg" id="bg1"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg2"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg3"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg4"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg5"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg6"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg7"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg8"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg9"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg10"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg11"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg12"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg13"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg14"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg15"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg16"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg17"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg18"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg19"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg20"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg21"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg22"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg23"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg24"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg25"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg26"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg27"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg28"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg29"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg30"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg31"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg32"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg33"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg34"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg35"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg36"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg37"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg38"&gt;&lt;/div&gt;  &lt;div class="bg" id="bg39"&gt;&lt;/div&gt;      &lt;/div&gt;  &lt;div class="clear"&gt;&lt;/div&gt;    &lt;/body&gt;  &lt;/html&gt;

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。