JavaScript实现鼠标拖拽的具体实例

最新推荐文章于 2020-11-06 11:29:42 发布

iteye_2156

最新推荐文章于 2020-11-06 11:29:42 发布

阅读量160

点赞数

文章标签： JavaScript HTML ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_2156/article/details/82007257

版权

本文提供了一个使用JavaScript实现鼠标拖拽效果的详细示例。通过简单的HTML和JavaScript代码，可以创建一个可拖动的div元素，该元素响应鼠标的按下、移动和释放事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript实现鼠标拖拽的具体实例

2010-12-01 17:23

‍实现鼠标拖拽详细的例子如下：完整复制可查看其效果
<html>
<head>
    <title>测试鼠标拖动效果</title>
     <script>
       var move=false;
       var x;
       var y;
       function startDrag(target,dragObject){
         if(event.button==1){
            var dragObj=document.getElementById(dragObject);
            target.setCapture();
            target.style.backgroundColor="#ccc";
            x=event.clientX-parseInt(dragObj.style.left);
            y=event.clientY-parseInt(dragObj.style.top);
             move=true;
         }
       }
       function drag(dragObject){
        //alert("drag");
          if(move){
            var dragObj=document.getElementById(dragObject);
            dragObj.style.left=event.clientX-x;
            dragObj.style.top=event.clientY-y;
          }
       }
       function stopDrag(target,dragObject){
          var dragObj=document.getElementById(dragObject);
          target.style.backgroundColor="#1a37a4";
         target.releaseCapture();
       }
     </script>
</head>
<body>
     <div id="targetObj" style="width:300px;position:absolute;top:10px;left:20px;z-index:10;" >
         <table width="100%">
           <tr>
              <td style="width:100%;background-color:#1a37a4;height:30px;cursor:move;" οnmοusedοwn="startDrag(this,'targetObj');" οnmοusemοve="drag('targetObj');" οnmοuseup="stopDrag(this,'targetObj');">
                 <font color="#ffffff">ALI_ZHEZHE Area</font>
              </td>
           </tr>
           <tr>
              <td style="width:100%;background-color:#ffffff;height:100px;text-align:center;">
                Welcome to Ali_zhezhe's area!
              <td>
           </tr>
         </table>
     </div>
<body>
</html>