js拖拽div例子

客官°小女子只卖身不卖艺 2021-11-01 03:34 447阅读 0赞

1.demo.html

-———————————————-

<!doctype html>



  1. <head>  
  2.     <style type="text/css">  
  3.     .taskdiv\{  
  4.         background-color:rgb(248, 225, 64);  
  5.         height:50px;  
  6.         width:50px;  
  7.         padding:0px;  
  8.         margin: 2px;  
  9.     \}  
  10.     .whiteboardtable \{  
  11.         border-collapse: collapse;  
  12.         border: 1px solid rgb(220, 220, 220);  
  13.         width: 100%;  
  14.     \}  
  15.     .whiteboardtable tr td \{  
  16.         -moz-border-bottom-colors: none;  
  17.         -moz-border-left-colors: none;  
  18.         -moz-border-right-colors: none;  
  19.         -moz-border-top-colors: none;  
  20.         border-color: \#DCDCDC;  
  21.         border-image: none;  
  22.         border-right: 1px solid \#DCDCDC;  
  23.         border-style: solid;  
  24.         border-width: 0 1px 1px 0;  
  25.     \}  
  26.     .whole\_outter\_tabletd \{  
  27.         width: 19%;  
  28.         position: relative;/\*\*重要\*\*/  
  29.         vertical-align: top;  
  30.         padding: 1px;  
  31.         font-size: 12px;  
  32.     \}  
  34.     </style>  
  35.     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
  36.     <script src="drag.js"></script>  
  38.     <script type="text/javascript">  
  39.         $(function()\{  
  40.             prepareForMove();  
  41.             //第二列宽度\*4  
  42.             var maxWait = html("whiteboardtable").rows\[0\].cells\[1\].offsetWidth\*4;  
  43.             console.log(maxWait);  
  44.             $('\#drag1').dragDrop(\{fixarea:\[0,maxWait,0,0\],callback:function(params)\{  
  45.                 //$('\#span1').text('X:'+params.moveX+' Y:'+params.moveY);  
  46.                 console.log(params);//这里可以直接获得移动div的ID  
  47.                 var oddtriger=trigerStatuWindow('wait','odd',params);  
  48.                 console.log(oddtriger);  
  49.                 if(oddtriger=='no')\{  
  50.                     //同一状态内的拖动,复原位置  
  51.                     console.log("wait->wait,我要复原");  
  52.                     revertToOri(params.myele.context.id);  
  53.                 \}else if(oddtriger=='doing')\{  
  54.                     //从wait->doing状态移动，这里可能要与后台交互  
  55.                     //做些你想做的事情，如与后台交互，重新返回数据，重新刷新任务列表等  
  56.                     console.log("从wait->doing状态移动");  
  57.                 \}  
  58.             \}\});  
  59.             $('\#drag11').dragDrop(\{fixarea:\[0,600,0,0\],callback:function(params)\{  
  60.                 //console.log(params.myele.context.id);这里可以直接获得移动div的ID  
  61.             \}\});  
  62.             $('\#drag2').dragDrop(\{fixarea:\[-300,400,0,0\],callback:function(params)\{  
  63.                 //console.log(params.myele.context.id);这里可以直接获得移动div的ID  
  64.             \}\});  
  65.             $('\#drag3').dragDrop(\{fixarea:\[0,600,0,0\],callback:function(params)\{  
  66.                 //console.log(params.myele.context.id);这里可以直接获得移动div的ID  
  67.             \}\});  
  68.             $('\#drag4').dragDrop(\{fixarea:\[0,600,0,0\],callback:function(params)\{  
  69.                 //console.log(params.myele.context.id);这里可以直接获得移动div的ID  
  70.             \}\});  
  71.         \});  
  73.         function html(id)\{return document.getElementById(id)\}  
  74.     </script>  
  75. </head>  
  76. <body>  
  77. <table id="whiteboardtable" width="100%" class="whiteboardtable">  
  78. <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>  
  79. <tr>  
  80.     <td id="firsttd1" class="half\_outter\_tabletd">  
  81.         <div>需求1</div>  
  82.     </td>  
  83.     <td id="179wait\_td" class="whole\_outter\_tabletd">  
  85.         <table>  
  86.         <tr>  
  87.             <td class="whole\_outter\_tabletd"><div id="drag1" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务1</div></td>  
  88.             <td class="whole\_outter\_tabletd"><div id="drag11" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务11</div></td>  
  89.         </tr>  
  90.         <tr>  
  91.             <td class="whole\_outter\_tabletd"><div id="drag3" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务3</div></td>  
  92.             <td class="whole\_outter\_tabletd"><div id="drag4" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务4</div></td>  
  93.         </tr>  
  94.         </table>  
  95.     </td>  
  96.     <td class="whole\_outter\_tabletd">&nbsp;</td>  
  97.     <td class="whole\_outter\_tabletd">&nbsp;</td>  
  98.     <td class="whole\_outter\_tabletd">&nbsp;</td>  
  99. </tr>  
  100. <tr>  
  101.     <td><div>需求2</div></td>  
  102.     <td class="whole\_outter\_tabletd"></td>  
  103.     <td class="whole\_outter\_tabletd">&nbsp;</td>  
  104.     <td class="whole\_outter\_tabletd"><div id="drag2" class="taskdiv" οnmοusedοwn="divmoveUp(this.id)">任务2</div></td>  
  105.     <td class="whole\_outter\_tabletd">&nbsp;</td>  
  106. </tr>  
  107. </table>  
  108. <span id="span1"></span>      
  111. </body>

-———————————————-

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 

  1.                     - document.body.clientLeft,  
  2.             y : ev.clientY + document.body.scrollTop  
  3.                     - document.body.clientTop  
  4.         \};  
  5.     \},  
  6.     // 获取样式值  
  7.     getStyle : function(obj, styleName) \{  
  8.         return obj.currentStyle ? obj.currentStyle\[styleName\]  
  9.                 : document.defaultView.getComputedStyle(obj, null)\[styleName\];  
  10.         // return obj.currentStyle ? obj.currentStyle\[styleName\] :  
  11.         // document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);  
  12.     \}  
  13. \});  
  15. // 元素拖拽插件  
  16. $.fn.dragDrop = function(options) \{  
  17.     var opts = $.extend(\{\}, $.fn.dragDrop.defaults, options);  
  18.     return this.each(function() \{  
  19.         // 是否正在拖动  
  20.         var bDraging = false;  
  21.         // 移动的元素  
  22.         var moveEle = $(this);  
  23.         // 点击哪个元素，以触发移动。  
  24.         // 该元素需要是被移动元素的子元素（比如标题等）  
  25.         var focuEle = opts.focuEle ? $(opts.focuEle, moveEle) : moveEle;  
  26.         if (!focuEle || focuEle.length <= 0) \{  
  27.             alert('focuEle is not found! the element must be a child of '  
  28.                     + this.id);  
  29.             return false;  
  30.         \}  
  32.         // initDiffX|Y : 初始时，鼠标与被移动元素原点的距离  
  33.         // moveX|Y : 移动时，被移动元素定位位置 (新鼠标位置与initDiffX|Y的差值)  
  34.         // 如果定义了移动中的回调函数，该对象将以参数传入回调函数。  
  35.         var dragParams = \{  
  36.             initDiffX : '',  
  37.             initDiffY : '',  
  38.             moveX : '',  
  39.             moveY : '',  
  40.             myele : ''  
  41.         \};  
  42.         // 被移动元素，需要设置定位样式，否则拖拽效果将无效。  
  43.         moveEle.css(\{  
  44.             'position' : 'relative',  
  45.             'left' : '0',  
  46.             'top' : '0'  
  47.         \});  
  48.         dragParams.myele = moveEle;  
  49.         // 点击时，记录鼠标位置  
  50.         // DOM写法： getElementById('\*\*\*').οnmοusedοwn= function(event);  
  53.         var drag = function(e) \{  
  54.           e = e || window.event;  
  55.           //focuEle.style.cursor = "pointer";  
  56.           !+"\\v1"? document.selection.empty() : window.getSelection().removeAllRanges();  
  57.           //focuEle.style.left = e.clientX - focuEle.offset\_x  + "px";  
  58.           //focuEle.style.top = e.clientY - focuEle.offset\_y  + "px";  
  59.           //focuEle.innerHTML = parseInt(focuEle.style.left,10)+ "X"+parseInt(focuEle.style.top,10);  
  62.           if (bDraging) \{  
  63.                 // if(moveEle.get(0).setCapture)  
  64.                 // \{  
  65.                 // moveEle.get(0).setCapture();  
  66.                 // \}  
  67.                 moveEle.css(\{  
  68.                     'cursor' : 'move'  
  69.                 \});  
  70.                 // 被移动元素的新位置，实际上鼠标当前位置与原位置之差  
  71.                 // 实际上，被移动元素的新位置，也可以直接是鼠标位置，这也能体现拖拽，但是元素的位置就不会精确。  
  72.                 dragParams.moveX = $.mouseCoords(e).x  
  73.                         - dragParams.initDiffX;  
  74.                 dragParams.moveY = $.mouseCoords(e).y  
  75.                         - dragParams.initDiffY;  
  76.                 // 是否限定在某个区域中移动.  
  77.                 // fixarea格式: \[x轴最小值,x轴最大值,y轴最小值,y轴最大值\]  
  78.                 if (opts.fixarea) \{  
  79.                     if (dragParams.moveX < opts.fixarea\[0\]) \{  
  80.                         dragParams.moveX = opts.fixarea\[0\]  
  81.                     \}  
  82.                     if (dragParams.moveX > opts.fixarea\[1\]) \{  
  83.                         dragParams.moveX = opts.fixarea\[1\]  
  84.                     \}  
  85.                     if (dragParams.moveY < opts.fixarea\[2\]) \{  
  86.                         dragParams.moveY = opts.fixarea\[2\]  
  87.                     \}  
  88.                     if (dragParams.moveY > opts.fixarea\[3\]) \{  
  89.                         dragParams.moveY = opts.fixarea\[3\]  
  90.                     \}  
  91.                 \}  
  93.                 // 移动方向：可以是不限定、垂直、水平。  
  94.                 if (opts.dragDirection == 'all') \{  
  95.                     // DOM写法： document.getElementById('\*\*\*').style.left =  
  96.                     // '\*\*\*px';  
  97.                     moveEle.css(\{  
  98.                         'left' : dragParams.moveX,  
  99.                         'top' : dragParams.moveY  
  100.                     \});  
  101.                 \} else if (opts.dragDirection == 'vertical') \{  
  102.                     moveEle.css(\{  
  103.                         'top' : dragParams.moveY  
  104.                     \});  
  105.                 \} else if (opts.dragDirection == 'horizontal') \{  
  106.                     moveEle.css(\{  
  107.                         'left' : dragParams.moveX  
  108.                     \});  
  109.                 \}  
  110.                 // 如果有回调  
  111.                 // if(opts.callback)  
  112.                 // \{  
  113.                 // 将dragParams作为参数传递  
  114.                 // opts.callback.call(a,1);  
  115.                 // \}  
  116.             \}  
  117.         \}  
  119.         var dragend = function()\{  
  120.           document.onmouseup = null;  
  121.           document.onmousemove = null;  
  123.           bDraging = false;  
  124.             moveEle.css(\{  
  125.                 'cursor' : 'default'  
  126.             \});  
  127.             // if(moveEle.get(0).releaseCapture && dragParams.moveX!=0)  
  128.             if (dragParams.moveX != 0) \{  
  129.                 if (opts.callback) \{  
  130.                     // 将dragParams作为参数传递  
  131.                     opts.callback.call(opts.callback, dragParams);  
  132.                 \}  
  133.             \}  
  134.             if (moveEle.get(0).releaseCapture) \{  
  135.                 moveEle.get(0).releaseCapture();  
  136.             \} else \{  
  137.                 // window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);  
  138.             \}  
  139.         \}  
  141.         var dragstart = function(e)\{  
  142.           e = e || window.event;  
  143.           focuEle.offset\_x = e.clientX - focuEle.offsetLeft;  
  144.           focuEle.offset\_y = e.clientY - focuEle.offsetTop;  
  145.           document.onmouseup = dragend;  
  146.           document.onmousemove = drag;  
  148.           // 标记开始移动  
  149.             bDraging = true;  
  150.             // 改变鼠标形状  
  151.             moveEle.css(\{  
  152.                 'cursor' : 'default'  
  153.             \});  
  155.             // 捕获事件。（该用法，还有个好处，就是防止移动太快导致鼠标跑出被移动元素之外）  
  156.             if (moveEle.get(0).setCapture) \{  
  157.                 moveEle.get(0).setCapture();  
  158.             \} else \{  
  159.                 // window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);  
  160.             \}  
  162.             dragParams.initDiffX = $.mouseCoords(e).x  
  163.                     - moveEle.position().left;  
  164.             dragParams.initDiffY = $.mouseCoords(e).y  
  165.                     - moveEle.position().top;  
  167.           return false;  
  168.         \}  
  169.         //focuEle.onmousedown = dragstart;  
  170.         focuEle.bind('mousedown',dragstart);  
  175.     \});  
  176. \};  
  177. // 默认配置  
  178. $.fn.dragDrop.defaults = \{  
  179.     focuEle : null, // 点击哪个元素开始拖动,可为空。不为空时，需要为被拖动元素的子元素。  
  180.     callback : null, // 拖动时触发的回调。  
  181.     dragDirection : 'all', // 拖动方向：\['all','vertical','horizontal'\]  
  182.     fixarea : null  
  183. // 限制在哪个区域拖动,以数组形式提供\[minX,maxX,minY,maxY\]  
  184. \};

}

/**
* 通过移动的位置和移动的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;
}

-———————————————

发表评论

表情：
评论列表 （有 0 条评论，447人围观）

还没有评论，来说两句吧...

相关阅读

    相关 js拖拽

    拖拽使用的三个事件 onmousedown //鼠标按下 onmousemove //鼠标移动 onmouseup //鼠标抬起

    怼烎@怼烎@/ 0 赞/ 101 阅读

    相关 JS 拖拽

    实现后效果 ![70][] 实现原理： 1. 在允许拖拽的节点元素上，监听mousedown(按下鼠标按钮)事件，鼠标按下后，事件触发 2. 监听mousemov

    ╰半夏微凉°╰半夏微凉°/ 0 赞/ 428 阅读