一个简单的鼠标拖曳图层效果

稿源：互联网 2022-04-02 21:36:42 点击： 8276 撤稿纠错

简单JS代码实现的鼠标拖曳图层效果，比较精简，大家参考一下。

以下讨论的是和拖曳相关的一个简单的鼠标拖曳图层效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
  <script type="text/javascript">
  function drag(elementToDrag,event){
    var startX=event.clientX,startY=event.clientY;
    var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;
    var deltaX=startX-origX,deltaY=startY-origY;

    if(document.addEventListener){
       document.addEventListener("mousemove",moveHandler,true); 
    document.addEventListener("mouseup",upHandler,true);
 }
 else{
    elementToDrag.setCapture();
    elementToDrag.attachEvent("onmousemove",moveHandler);
    elementToDrag.attachEvent("onmouseup",upHandler);
    elementToDrag.attachEvent("onlosecapture",upHandler);
 }

 if(event.stopPropagation) event.stopPropagation();
 else event.cancelBubble=true;
 
 if(event.preventDefault) event.preventDefault();
 else event.returnValue=false;

 function moveHandler(e){
   if(!e) e=window.event;
   elementToDrag.style.left=(e.clientX-deltaX)+"px";
   elementToDrag.style.top=(e.clientY-deltaY)+"px";
   elementToDrag.style.zIndex="10";

   elementToDrag.getElementsByTagName("p")[0].innerHTML="clientX:"+e.clientX+"</br>"+"clientY:"+e.clientY+"</br>"+"offsetLeft:"+origX+"</br>"+"offsetTop:"+origY+"</br>"+"clientX-offsetLeft:"+deltaX+"</br>"+"clientY-offsetTop:"+deltaY+"</br>";

   if(e.stopPropagation) e.stopPropagation();
   else e.cancelBubble = true;
 }

 function upHandler(e){
   if(!e) e=window.event;
      elementToDrag.style.zIndex="1";
   if(document.removeEventListener){
      document.removeEventListener("mouseup",upHandler,true);
   document.removeEventListener("mousemove",moveHandler,true);
   }
   else{
      elementToDrag.detachEvent("onlosecapture",upHandler);
   elementToDrag.detachEvent("onmouseup",upHandler);
   elementToDrag.detachEvent("onmousemove",moveHandler);
   elementToDrag.releaseCapture();
   }

   if(e.stopPropagation) e.stopPropagation();
   else e.cancelBubble=true;
 }
  }
  </script>

  <div style="position:absolute;left:100px;top:100px;width:250px;background-color:#789;border:1px solid #f00">
    <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me1</div>
 <p>test</p>
  </div>

    <div style="position:absolute;left:100px;top:200px;width:250px;background-color:#789;border:1px solid #f00">
    <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me2</div>
 <p>test</p>
  </div>

    <div style="position:absolute;left:100px;top:300px;width:250px;background-color:#789;border:1px solid #f00">
    <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me3</div>
 <p>test</p>
  </div>
 </body>
</html>

关于一个简单的鼠标拖曳图层效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2012040579860.shtml方便下次再访问哦。

·上一篇： 带向左向右方向按钮图片无限循环左右滚动的js特效代码
·下一篇： jquery制作动感的焦点图切换代码JS特效

一个简单的鼠标拖曳图层效果

文章分类LIST >>返回首页

最新游戏

最新新闻