JavaScript div层拖拽左右移动

来源：互联网发布：宏晶单片机烧录软件编辑：程序博客网时间：2024/05/18 20:13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>拖动DIV</title> <style type="text/css"> .show{background:#7cd2f8;width:100%;height:100px;text-align:center;left:0px;top:0px;z-index:10;margin-bottom: 5px;}.divLeft, .divRight{width:58%; height: 500px; float: left;}.divRight{width:38%; height: 500px; float: left;}</style>  <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript">var tdiv;var node= ".show";var ao = null;var draggedFlag=0;  //鼠标在拖动状态,0:未初始化 1：准备阶段，2：拖动阶段var parentDiv=null;function SectionMousedown(e){ao = e.srcElement;parentDiv=ao.parentNode;draggedFlag=1;tdiv = document.createElement("div");//tdiv.setAttribute("id","itemdiv");tdiv.innerHTML = ao.outerHTML;tdiv.style.display = "block";tdiv.style.position = "absolute";tdiv.style.filter = "alpha(opacity=70)";tdiv.style.cursor = "move";tdiv.style.zIndex = 12;tdiv.style.width = ao.offsetWidth+"px"; //被移动table对象的高度tdiv.style.height = ao.offsetHeight+"px";tdiv.style.top = (getInfo(ao).top+0)+"px";tdiv.style.left = getInfo(ao).left+"px";document.body.appendChild(tdiv);//鼠标按下时该鼠标所在的位置lastX = event.clientX;lastY = event.clientY;//tdiv的位置lastLeft = tdiv.style.left;lastTop = tdiv.style.top;//alert(lastLeft +' '+lastTop);$(tdiv).css("cursor", "move");try {//tdiv.dragDrop(); //初始化拖曳事件} catch (e) {} //this表示原来的divvar offset = $(this).offset(); //DIV在页面的位置var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离//alert(x+' '+y);$(document).bind("mousemove", function (ev) //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件{if(tdiv!=null){draggedFlag=2;$(tdiv).stop(); //加上这个之后var _x = ev.pageX - x; //获得X轴方向移动的值var _y = ev.pageY - y; //获得Y轴方向移动的值document.getElementById("seatX").value=ev.pageX;document.getElementById("seatY").value=ev.pageY;$(tdiv).animate({left :_x + "px",top : _y + "px"}, 10);}});}$(document).ready(function () {var partR=document.getElementById("partR");var partL=document.getElementById("partL");for(var i=0;i<partR.children.length;i++){var sectionR=partR.children[i];$(sectionR).mousedown(SectionMousedown);}for(var i=0;i<partL.children.length;i++){var sectionL=partL.children[i];$(sectionL).mousedown(SectionMousedown);}$(document).mouseup(function (e) {//如果当前div位置小于0，将该div置于位置0处var offset = $(node).offset(); //DIV在页面的位置var x = offset.left; //获得鼠标指针离DIV元素左边界的距离var y =  offset.top; //获得鼠标指针离DIV元素上边界的距离if(draggedFlag==0){ //未初始化阶段，放下鼠标}else if(draggedFlag==1){//准备阶段，放下鼠标tdiv.style.cursor = "default";draggedFlag=0;document.body.removeChild(tdiv);tdiv=null;}else if(draggedFlag==2){//拖动阶段，放下鼠标draggedFlag=0;tdiv.style.cursor = "default";$(tdiv).css("cursor", "default");//鼠标指针变回原来默认形状//取得tdiv中的子结点var tchild=tdiv.children[0];$(document).unbind("mousemove");//解除绑定鼠标移动事件//鼠标松开时的位置var _x=e.pageX;var _y=e.pageY;var st_t=tdiv.children[0];$(st_t).mousedown(SectionMousedown);//松开鼠标时鼠标在左边，右边加上该结点if(mouseOnLeft(_x,_y)){partL.appendChild(st_t);parentDiv.removeChild(ao);}else//松开鼠标时在鼠标位置在右边，右边加上该结点if(mouseOnRight(_x,_y)){partR.appendChild(st_t);parentDiv.removeChild(ao);}else{//松开鼠标时鼠标在其他位置,}document.body.removeChild(tdiv);tdiv=null;ao = null;st_t=null;parentDiv=null;//nodeAnimate(x,y);}});})function nodeAnimate(x,y){if(x<0) x=0;if(y<0) y=0;$(node).animate({left : x + "px",top : y + "px"}, 1001);}//返回true/false。判断鼠标在右边function mouseOnRight(x,y){//鼠标松开时的位置//var x=e.pageX;//var y=e.pageY;//右边框子的大小位置var partR=document.getElementById("partR");var divx1 = partR.offsetLeft; var divy1 = partR.offsetTop; var divx2 = partR.offsetLeft + partR.offsetWidth; var divy2 = partR.offsetTop + partR.offsetHeight;  //alert(divx1+' '+divy1+' '+divx2+' '+divy2+' ');document.getElementById("seatZ").value=divx1+' '+divy1+' '+divx2+' '+divy2+' ';//if( x <= divx2 && x >= divx1 && y <= divy2 && y >= divy1){ if( x >= divx1 ){ return true; }elsereturn false;}//返回true/false  判断鼠标在左边function mouseOnLeft(x,y){//鼠标松开时的位置//var x=e.pageX;//var y=e.pageY;//右边框子的大小位置var partL=document.getElementById("partL");var divx1 = partL.offsetLeft; var divy1 = partL.offsetTop; var divx2 = partL.offsetLeft + partL.offsetWidth; var divy2 = partL.offsetTop + partL.offsetHeight;  //alert(divx1+' '+divy1+' '+divx2+' '+divy2+' ');if(x < divx2){ return true; }elsereturn false;}function getInfo(o) { //取得对象的绝对坐标var to = new Object();to.left = to.right = to.top = to.bottom = 0;var twidth = o.offsetWidth;var theight = o.offsetHeight;while (o != document.body) {to.left += o.offsetLeft;to.top += o.offsetTop;o = o.offsetParent;}to.right = to.left + twidth;to.bottom = to.top + theight;return to;}</script> </head> <body><input type = "button"  onclick="aaa();" value="Click Me" /><input type = "text"   id="seatX" /><input type = "text="  id="seatY" /><input type = "text="  id="seatZ" /><br /><br /><div  style="width:100%; height: 500px; border-color: #FF0000; border: 5px;"   >      <!--jquery实现DIV层拖-->    <div  id="partL" class="divLeft" >            <div id="st1" class="show"> jquery实现DIV层拖动1  </div>       <div id="st2" class="show"> jquery实现DIV层拖动2  </div> <div id="st3" class="show"> jquery实现DIV层拖动3  </div>       <div id="st4" class="show"> jquery实现DIV层拖动4  </div>     </div><div style="width:1%; height: 500px; float: left; border-right-color: #00FF33; background-color: #00FF00;"></div>    <div id="partR" class="divRight" >      <div id="st5" class="show"> jquery实现DIV层拖动5  </div>           </div></div></div><!--jquery实现DIV层拖--></body> <script type="text/javascript">function aaa() { alert(getOs())}function getOs()  {      var OsObject = "";     if(!!window.ActiveXObject || "ActiveXObject" in window) {          return "MSIE";     }     if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){          return "Firefox";     }   if(isChrome=navigator.userAgent.indexOf("Chrome")>0) {          return "Chrome";     }   if(isSafari=navigator.userAgent.indexOf("Safari")>0) {          return "Safari";     }   }</script></html>
用文件保存该代码即可执行，需要引入jquery.js文件，花了我两天时间才做成，不过还有待改进。
可以兼容IE9到IE11，谷歌浏览器，火狐暂时不兼容，页面底下包括浏览器判断，，读者可以依此去想办法兼容其他浏览器
0 0