拖拽js

  1. 拖拽的基本原理:当mousedown时记下鼠标点击位置离拖拽容器左边沿的距离和上边沿的距离,即tmpX,tmpY;mousemove时通过定位拖拽容器的style.left/style.top,使拖拽容器进行移动,定位到哪里则由刚刚的tmpX/tmpY和当前鼠标所在位置计算得出;mouseup时,结束移动。
  2. “var dragObj = this;” 这句是为了在mousedown/mouseup/mousemove事件里对Drag对象的相关变量进行引用。因为在mousedown/mouseup/mousemove里的this是window.
  3. 当拖拽速度太快导致鼠标移出拖拽容器,而拖拽容器位置未变,用document.mousemove代替titleBar.mousemove即可。
  4. 设置拖拽容器可拖拽的范围,若未设置,则默认为当前窗口可视范围。Note:在设置范围的时候使用Math.max/min来处理,而不是用If语句判断,用后者的话会导致快速拖拽时未达到容许范围边沿即停止的状况。
  5. 当拖拽过程中,可设置是否保留原来拖拽容器,当拖拽结束,隐藏原来容器,默认不保留。
  6. 当拖拽时,可设置拖拽的容器是否透明及透明度多少,默认不透明。但若拖拽过程中设置保留原来拖拽容器,即keepOrigin: true,则设置透明度为50%。
  7. 使右键、鼠标中键等不能拖动,仅左键单击可以拖动。Note:IE鼠标左键为event.Button=1 FireFox为event.Button=0.
  8. 解决如果点击在图片上无法拖拽的问题:非常杯具的是IE通过ev.cancelBubble=true;ev.returnValue = false;来防止图片的事件,注意是放在document.onmousemove中,而FireFox通过ev.preventDefault();ev.stopPropagation(); 但是是放在titleBar的mousedown事件中。
  9. 有一种情况,当浏览器窗口不是最大化的时候,你希望当鼠标在浏览器外移动时,浏览器里的拖拽容器仍然移动,这时就要使用鼠标事件捕获,IE中相应的是dragDiv.setCapture();与dragDiv.releaseCapture(); FF中是window.captureEvents(Event.MOUSEMOVE);与window.releaseEvents(Event.MOUSEMOVE) 。
  10. 确保每次拖拽时拖拽容器的zindex都不会被其他块元素覆盖。