js拖拽div例子_context.js drag.js-CSDN博客

1.demo.html

--------------------------------

<!doctype html>



 <html class="no-js" lang="en-US"> 

   <head>
       <style type="text/css">
       .taskdiv{
           background-color:rgb(248, 225, 64);
           height:50px;
           width:50px;
           padding:0px;
           margin: 2px;
       }
       .whiteboardtable {
           border-collapse: collapse;
           border: 1px solid rgb(220, 220, 220);
           width: 100%;
       }
       .whiteboardtable tr td {
           -moz-border-bottom-colors: none;
           -moz-border-left-colors: none;
           -moz-border-right-colors: none;
           -moz-border-top-colors: none;
           border-color: #DCDCDC;
           border-image: none;
           border-right: 1px solid #DCDCDC;
           border-style: solid;
           border-width: 0 1px 1px 0;
       }
       .whole_outter_tabletd {
           width: 19%;
           position: relative;/**重要**/
           vertical-align: top;
           padding: 1px;
           font-size: 12px;
       }

       </style>
       <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
       <script src="drag.js"></script>

       <script type="text/javascript">
           $(function(){
               prepareForMove();
               //第二列宽度*4
               var maxWait = html("whiteboardtable").rows[0].cells[1].offsetWidth*4;
               console.log(maxWait);
               $('#drag1').dragDrop({fixarea:[0,maxWait,0,0],callback:function(params){
                   //$('#span1').text('X:'+params.moveX+' Y:'+params.moveY);
                   console.log(params);//这里可以直接获得移动div的ID
                   var oddtriger=trigerStatuWindow('wait','odd',params);
                   console.log(oddtriger);
                   if(oddtriger=='no'){
                       //同一状态内的拖动,复原位置
                       console.log("wait->wait,我要复原");
                       revertToOri(params.myele.context.id);
                   }else if(oddtriger=='doing'){
                       //从wait->doing状态移动，这里可能要与后台交互
                       //做些你想做的事情，如与后台交互，重新返回数据，重新刷新任务列表等
                       console.log("从wait->doing状态移动");
                   }
               }});
               $('#drag11').dragDrop({fixarea:[0,600,0,0],callback:function(params){
                    //console.log(params.myele.context.id);这里可以直接获得移动div的ID
               }});
               $('#drag2').dragDrop({fixarea:[-300,400,0,0],callback:function(params){
                    //console.log(params.myele.context.id);这里可以直接获得移动div的ID
               }});
               $('#drag3').dragDrop({fixarea:[0,600,0,0],callback:function(params){
                    //console.log(params.myele.context.id);这里可以直接获得移动div的ID
               }});
               $('#drag4').dragDrop({fixarea:[0,600,0,0],callback:function(params){
                    //console.log(params.myele.context.id);这里可以直接获得移动div的ID
               }});
           });

           function html(id){return document.getElementById(id)}
       </script>
   </head>
   <body>
   <table id="whiteboardtable" width="100%" class="whiteboardtable">
   <tr><td width="238">需求</td><td width="238">状态1</td><td width="238">状态2</td><td width="238">状态3</td><td width="238">状态4</td></tr>
   <tr>
       <td id="firsttd1" class="half_outter_tabletd">
           <div>需求1</div>
       </td>
       <td id="179wait_td" class="whole_outter_tabletd">

           <table>
           <tr>
               <td class="whole_outter_tabletd"><div id="drag1" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务1</div></td>
               <td class="whole_outter_tabletd"><div id="drag11" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务11</div></td>
           </tr>
           <tr>
               <td class="whole_outter_tabletd"><div id="drag3" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务3</div></td>
               <td class="whole_outter_tabletd"><div id="drag4" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务4</div></td>
           </tr>
           </table>
       </td>
       <td class="whole_outter_tabletd"> </td>
       <td class="whole_outter_tabletd"> </td>
       <td class="whole_outter_tabletd"> </td>
   </tr>
   <tr>
       <td><div>需求2</div></td>
       <td class="whole_outter_tabletd"></td>
       <td class="whole_outter_tabletd"> </td>
       <td class="whole_outter_tabletd"><div id="drag2" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务2</div></td>
       <td class="whole_outter_tabletd"> </td>
   </tr>
   </table>
   <span id="span1"></span>


   </body>
</html>

--------------------------------

2.drag.js

--------------------------------

/**
* 移动的准备工作
*/
function prepareForMove() {
   $.extend({
       // 获取鼠标当前坐标
       mouseCoords : function(ev) {
           if (ev.pageX || ev.pageY) {
               return {
                   x : ev.pageX,
                   y : ev.pageY
               };
           }
           return {
               x : ev.clientX + document.body.scrollLeft
                       - document.body.clientLeft,
               y : ev.clientY + document.body.scrollTop
                       - document.body.clientTop
           };
       },
       // 获取样式值
       getStyle : function(obj, styleName) {
           return obj.currentStyle ? obj.currentStyle[styleName]
                   : document.defaultView.getComputedStyle(obj, null)[styleName];
           // return obj.currentStyle ? obj.currentStyle[styleName] :
           // document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
       }
   });

   // 元素拖拽插件
   $.fn.dragDrop = function(options) {
       var opts = $.extend({}, $.fn.dragDrop.defaults, options);
       return this.each(function() {
           // 是否正在拖动
           var bDraging = false;
           // 移动的元素
           var moveEle = $(this);
           // 点击哪个元素，以触发移动。
           // 该元素需要是被移动元素的子元素（比如标题等）
           var focuEle = opts.focuEle ? $(opts.focuEle, moveEle) : moveEle;
           if (!focuEle || focuEle.length <= 0) {
               alert('focuEle is not found! the element must be a child of '
                       + this.id);
               return false;
           }

           // initDiffX|Y : 初始时，鼠标与被移动元素原点的距离
           // moveX|Y : 移动时，被移动元素定位位置 (新鼠标位置与initDiffX|Y的差值)
           // 如果定义了移动中的回调函数，该对象将以参数传入回调函数。
           var dragParams = {
               initDiffX : '',
               initDiffY : '',
               moveX : '',
               moveY : '',
               myele : ''
           };
           // 被移动元素，需要设置定位样式，否则拖拽效果将无效。
           moveEle.css({
               'position' : 'relative',
               'left' : '0',
               'top' : '0'
           });
           dragParams.myele = moveEle;
           // 点击时，记录鼠标位置
           // DOM写法： getElementById('***').οnmοusedοwn= function(event);


           var drag = function(e) {
              e = e || window.event;
              //focuEle.style.cursor = "pointer";
              !+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
              //focuEle.style.left = e.clientX - focuEle.offset_x + "px";
              //focuEle.style.top = e.clientY - focuEle.offset_y + "px";
              //focuEle.innerHTML = parseInt(focuEle.style.left,10)+ "X"+parseInt(focuEle.style.top,10);


              if (bDraging) {
                   // if(moveEle.get(0).setCapture)
                   // {
                   // moveEle.get(0).setCapture();
                   // }
                   moveEle.css({
                       'cursor' : 'move'
                   });
                   // 被移动元素的新位置，实际上鼠标当前位置与原位置之差
                   // 实际上，被移动元素的新位置，也可以直接是鼠标位置，这也能体现拖拽，但是元素的位置就不会精确。
                   dragParams.moveX = $.mouseCoords(e).x
                           - dragParams.initDiffX;
                   dragParams.moveY = $.mouseCoords(e).y
                           - dragParams.initDiffY;
                   // 是否限定在某个区域中移动.
                   // fixarea格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值]
                   if (opts.fixarea) {
                       if (dragParams.moveX < opts.fixarea[0]) {
                           dragParams.moveX = opts.fixarea[0]
                       }
                       if (dragParams.moveX > opts.fixarea[1]) {
                           dragParams.moveX = opts.fixarea[1]
                       }
                       if (dragParams.moveY < opts.fixarea[2]) {
                           dragParams.moveY = opts.fixarea[2]
                       }
                       if (dragParams.moveY > opts.fixarea[3]) {
                           dragParams.moveY = opts.fixarea[3]
                       }
                   }

                   // 移动方向：可以是不限定、垂直、水平。
                   if (opts.dragDirection == 'all') {
                       // DOM写法： document.getElementById('***').style.left =
                       // '***px';
                       moveEle.css({
                           'left' : dragParams.moveX,
                           'top' : dragParams.moveY
                       });
                   } else if (opts.dragDirection == 'vertical') {
                       moveEle.css({
                           'top' : dragParams.moveY
                       });
                   } else if (opts.dragDirection == 'horizontal') {
                       moveEle.css({
                           'left' : dragParams.moveX
                       });
                   }
                   // 如果有回调
                   // if(opts.callback)
                   // {
                   // 将dragParams作为参数传递
                   // opts.callback.call(a,1);
                   // }
               }
            }

            var dragend = function(){
              document.onmouseup = null;
              document.onmousemove = null;

              bDraging = false;
               moveEle.css({
                   'cursor' : 'default'
               });
               // if(moveEle.get(0).releaseCapture && dragParams.moveX!=0)
               if (dragParams.moveX != 0) {
                   if (opts.callback) {
                       // 将dragParams作为参数传递
                       opts.callback.call(opts.callback, dragParams);
                   }
               }
               if (moveEle.get(0).releaseCapture) {
                   moveEle.get(0).releaseCapture();
               } else {
                   // window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
               }
            }

            var dragstart = function(e){
              e = e || window.event;
              focuEle.offset_x = e.clientX - focuEle.offsetLeft;
              focuEle.offset_y = e.clientY - focuEle.offsetTop;
              document.onmouseup = dragend;
              document.onmousemove = drag;

              // 标记开始移动
               bDraging = true;
               // 改变鼠标形状
               moveEle.css({
                   'cursor' : 'default'
               });

               // 捕获事件。（该用法，还有个好处，就是防止移动太快导致鼠标跑出被移动元素之外）
               if (moveEle.get(0).setCapture) {
                   moveEle.get(0).setCapture();
               } else {
                   // window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
               }

               dragParams.initDiffX = $.mouseCoords(e).x
                       - moveEle.position().left;
               dragParams.initDiffY = $.mouseCoords(e).y
                       - moveEle.position().top;

              return false;
            }
            //focuEle.onmousedown = dragstart;
           focuEle.bind('mousedown',dragstart);




       });
   };
   // 默认配置
   $.fn.dragDrop.defaults = {
       focuEle : null, // 点击哪个元素开始拖动,可为空。不为空时，需要为被拖动元素的子元素。
       callback : null, // 拖动时触发的回调。
       dragDirection : 'all', // 拖动方向：['all','vertical','horizontal']
       fixarea : null
   // 限制在哪个区域拖动,以数组形式提供[minX,maxX,minY,maxY]
   };
}

/**
* 通过移动的位置和移动的statu块，计算移动到的位置返回 wait,doing,done,closed location : odd 奇数 even 偶数
*/
function trigerStatuWindow(statu, location, params) {
   var tablewidth = parseInt(parseInt(window.innerWidth
           || document.documentElement.clientWidth) - 79)*0.95;
   var waitTdWidth = tablewidth * 0.2;
   switch (statu) {
   case "wait":
       if (location == 'odd') {
           if (0 <= params.moveX && params.moveX < 3 / 4 * waitTdWidth) {
               return 'no';
           } else if (3 / 4 * waitTdWidth <= params.moveX
                   && params.moveX < 7 / 4 * waitTdWidth) {
               return 'doing';
           } else if (7 / 4 * waitTdWidth <= params.moveX
                   && params.moveX < 11 / 4 * waitTdWidth) {
               return 'done';
           } else if (11 / 4 * waitTdWidth <= params.moveX
                   && params.moveX < 15 / 4 * waitTdWidth) {
               return 'test';
           } else if (15 / 4 * waitTdWidth <= params.moveX) {
               return 'closed';
           } else {
               return 'no';
           }
       } else {
           if (0 <= params.moveX && params.moveX < 1 / 4 * waitTdWidth) {
               return 'no';
           } else if (1 / 4 * waitTdWidth < params.moveX
                   && params.moveX < 5 / 4 * waitTdWidth) {
               return 'doing';
           } else if (5 / 4 * waitTdWidth <= params.moveX
                   && params.moveX < 9 / 4 * waitTdWidth) {
               return 'done';
           } else if (9 / 4 * waitTdWidth <= params.moveX
                   && params.moveX < 13 / 4 * waitTdWidth) {
               return 'test';
           } else if (13 / 4 * waitTdWidth <= params.moveX) {
               return 'closed';
           } else {
               return 'no';
           }
       }
   case "doing":
       if (location == 'odd') {
           if (-1 / 4 * waitTdWidth >= params.moveX) {
               return 'wait';
           } else if (-1 / 4 * waitTdWidth < params.moveX
                   && params.moveX < 3 / 4 * waitTdWidth) {
               return 'no';
           } else if (3 / 4 * waitTdWidth <= params.moveX
                   && params.moveX < 7 / 4 * waitTdWidth) {
               return 'done';
           } else if (7 / 4 * waitTdWidth <= params.moveX
                   && params.moveX < 11 / 4 * waitTdWidth) {
               return 'test';
           } else if (11 / 4 * waitTdWidth <= params.moveX) {
               return 'closed';
           } else {
               return 'no';
           }
       } else {
           if (-3 / 4 * waitTdWidth >= params.moveX) {
               return 'wait';
           } else if (-3 / 4 * waitTdWidth < params.moveX
                   && params.moveX < 1 / 4 * waitTdWidth) {
               return 'no';
           } else if (1 / 4 * waitTdWidth < params.moveX
                   && params.moveX < 5 / 4 * waitTdWidth) {
               return 'done';
           } else if (5 / 4 * waitTdWidth < params.moveX
                   && params.moveX < 9 / 4 * waitTdWidth) {
               return 'test';
           } else if (9 / 4 * waitTdWidth <= params.moveX) {
               return 'closed';
           } else {
               return 'no';
           }
       }
       break;
   case "done":
       if (location == 'odd') {
           if (-5 / 4 * waitTdWidth >= params.moveX) {
               return 'wait';
           } else if (-5 / 4 * waitTdWidth < params.moveX
                   && params.moveX <= -1 / 4 * waitTdWidth) {
               return 'doing';
           } else if (-1 / 4 * waitTdWidth < params.moveX
                   && params.moveX < 3 / 4 * waitTdWidth) {
               return 'no';
           } else if (3 / 4 * waitTdWidth <= params.moveX
                   && params.moveX < 7 / 4 * waitTdWidth) {
               return 'test';
           } else if (7 / 4 * waitTdWidth <= params.moveX) {
               return 'closed';
           } else {
               return 'no';
           }
       } else {
           if (-7 / 4 * waitTdWidth >= params.moveX) {
               return 'wait';
           } else if (-7 / 4 * waitTdWidth < params.moveX
                   && params.moveX < -3 / 4 * waitTdWidth) {
               return 'doing';
           } else if (-3 / 4 * waitTdWidth < params.moveX
                   && params.moveX < 1 / 4 * waitTdWidth) {
               return 'no';
           } else if (1 / 4 * waitTdWidth <= params.moveX
                   && params.moveX < 5 / 4 * waitTdWidth) {
               return 'test';
           } else if (5 / 4 * waitTdWidth <= params.moveX) {
               return 'closed';
           } else {
               return 'no';
           }
       }
       break;
   case "test":
       if (location == 'odd') {
           if (-9 / 4 * waitTdWidth >= params.moveX) {
               return 'wait';
           } else if (-9 / 4 * waitTdWidth < params.moveX
                   && params.moveX <= -5 / 4 * waitTdWidth) {
               return 'doing';
           } else if (-5 / 4 * waitTdWidth < params.moveX
                   && params.moveX <= -1 / 4 * waitTdWidth) {
               return 'done';
           }else if (-1 / 4 * waitTdWidth < params.moveX
                   && params.moveX < 3 / 4 * waitTdWidth) {
               return 'no';
           } else if (3 / 4 * waitTdWidth <= params.moveX) {
               return 'closed';
           } else {
               return 'no';
           }
       } else {
           if (-11 / 4 * waitTdWidth >= params.moveX) {
               return 'wait';
           } else if (-11 / 4 * waitTdWidth < params.moveX
                   && params.moveX <= -7 / 4 * waitTdWidth) {
               return 'doing';
           } else if (-7 / 4 * waitTdWidth < params.moveX
                   && params.moveX <= -3 / 4 * waitTdWidth) {
               return 'done';
           }else if (-3 / 4 * waitTdWidth < params.moveX
                   && params.moveX < 1 / 4 * waitTdWidth) {
               return 'no';
           } else if (1 / 4 * waitTdWidth <= params.moveX) {
               return 'closed';
           } else {
               return 'no';
           }
       }
       break;
   case "closed":
       if (-1 / 4 * waitTdWidth < params.moveX) {
           return 'no';
       } else if (-5 / 4 * waitTdWidth < params.moveX
               && params.moveX < -1 / 4 * waitTdWidth) {
           return 'test';
       } else if (-9 / 4 * waitTdWidth < params.moveX
               && params.moveX < -5 / 4 * waitTdWidth) {
           return 'done';
       } else if (-13 / 4 * waitTdWidth < params.moveX
               && params.moveX < -9 / 4 * waitTdWidth) {
           return 'doing';
       } else if (-13 / 4 * waitTdWidth >= params.moveX) {
           return 'wait';
       } else {
           return 'no';
       }
       break;
   }
}

/**
* div复位
*/
function revertToOri(elemId) {
   html(elemId).style.left = 0 + 'px';
   html(elemId).style.zIndex = 0;
}

/**
* div置上
*/
function divmoveUp(id)
{
   var box = document.getElementById(id);
   box.style.zIndex=1;
}