问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

多个小方块拖拽如何循环？

头像
prototype_eva
    1.1k23657

    一个小方块拖拽效果

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
</head>
<style type="text/css">
    *{ padding:0; margin:0; list-style:none;}
    #div{ width:100px; height:100px; background:red; position:absolute;}
</style>
<body>
  <div id="div"></div>    

  <script type="text/javascript">
  window.onload=function(){
      var odiv=document.getElementById("div");
    var w=document.documentElement.clientWidth;
    var h=document.documentElement.clientHeight;
    alert(w+'+'+h);
      odiv.onmousedown=function(e){
       var oe=e||event;
       var divX=oe.clientX-odiv.offsetLeft;
       var divY=oe.clientY-odiv.offsetTop;
       
       document.onmousemove=function(e){
           var oe=e||event; 
           _left=oe.clientX-divX;
           _top=oe.clientY-divY;
         if(_top<0){
            _top=0; 
         }else if(_top>h-100){
            _top=h-100
         }
         
         if(_left<0){
            _left=0; 
         }else if(_left>w-100){
            _left=w-100;
         }
           odiv.style.left=_left+'px';
           odiv.style.top=_top+'px';

         }
         document.onmouseup=function(){
         document.onmousemove=null;
         document.onmouseup=null;

       };
      }
  }
  </script>
</body>
</html>

    现在问题是如果有多个div小方块该怎么循环实现每个都可以拖拽

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
</head>
<style type="text/css">
    *{ padding:0; margin:0; list-style:none;}
    div{ width:100px; height:100px; background:red; position:absolute;}
</style>
<body>
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <script type="text/javascript">
  window.onload=function(){
      var odiv=document.getElementsByTagName("div");
    var w=document.documentElement.clientWidth;
    var h=document.documentElement.clientHeight;
    alert(w+'+'+h);
      odiv.onmousedown=function(e){
       var oe=e||event;
       var divX=oe.clientX-odiv.offsetLeft;
       var divY=oe.clientY-odiv.offsetTop;
       
       document.onmousemove=function(e){
           var oe=e||event; 
           _left=oe.clientX-divX;
           _top=oe.clientY-divY;
         if(_top<0){
            _top=0; 
         }else if(_top>h-100){
            _top=h-100
         }
         
         if(_left<0){
            _left=0; 
         }else if(_left>w-100){
            _left=w-100;
         }
           odiv.style.left=_left+'px';
           odiv.style.top=_top+'px';

         }
         document.onmouseup=function(){
         document.onmousemove=null;
         document.onmouseup=null;

       };
      }
  }
  </script>
</body>
</html>

    怎么改？

    javascripthtmlcss
    阅读 2.9k
    1 个回答
    得票最新
    头像
    Daz
      293114
      ✓ 已被采纳

      可以试试下面的代码，看看是不是你想要的

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
     <script type="text/javascript">
  window.onload=function(){
    var oBtn = document.querySelector("#allDiv");        
    var dDiv = oBtn.querySelectorAll("div");
    for(var i=0;i<dDiv.length;i++){
        dDiv[i].onmousedown=function(e){
       var oe=e||event;
       var divCur=document.getElementById(oe.target.id);
       var w=document.documentElement.clientWidth;
       var h=document.documentElement.clientHeight;
       var divX=oe.clientX-divCur.offsetLeft;
       var divY=oe.clientY-divCur.offsetTop;
       
       document.onmousemove=function(e){
           var oe=e||event; 
           _left=oe.clientX-divX;
           _top=oe.clientY-divY;
         if(_top<0){
            _top=0; 
         }else if(_top>h-100){
            _top=h-100
         }
         
         if(_left<0){
            _left=0; 
         }else if(_left>w-100){
            _left=w-100;
         }
            divCur.style.left=_left+'px';
           divCur.style.top=_top+'px';

         }
         document.onmouseup=function(){
         document.onmousemove=null;
         document.onmouseup=null;

       };
      oe.preventDefault();
      }
    }     
  }
  </script>
</head>
<style type="text/css">
    *{ padding:0; margin:0; list-style:none;}
    #div{ width:100px; height:100px; background:red; position:absolute;}
    #div1{ width:100px; height:100px; background:green; position:absolute;}
    #div2{ width:100px; height:100px; background:yellow; position:absolute;}
</style>
<body id="allDiv">
  <div id="div"></div>
  <div id="div1"></div>
  <div id="div2"></div>  
</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题