如何讓每個新的div可拖動？

我想請求下面的幫助。基本上，我每次按下按鈕時都會嘗試新建一個<div>。然後，我想添加一個函數，使得每個新的<div>能夠被拖動和移動，當我點擊它並且當我釋放鼠標時它會下降（每個新的<div>應該單獨移動）。我嘗試了很多東西，但他們似乎都不太好。我得到的結果是，只有第一個<div>正在移動，或者所有<div>一起移動。我沒有添加我的移動功能，因爲它沒有很好的安排（很難理解，因爲我嘗試了很多東西）。我也不允許使用JQuery。如何讓每個新的div可拖動？

可以請您指導我做什麼？謝謝。

<html> 
<body> 
    <button id="mybutton">Create a new moveabl div</button> 
    <script> 
     var create = document.createElement("div"); 
     create.id = "dragm2"; 
     document.body.appendChild(create); 
     var count = 0; 
     var text = document.createTextNode("mu yu "); 
     document.getElementById("mybutton").addEventListener("click", function() { 
      count++; 
      var create = document.createElement("div"); 
      create.id = "dragme" + count; 
      create.style.background = "green"; 
      create.style.height = "170px"; 
      create.style.width= "70px"; 
      create.appendChild(text); 
      document.body.appendChild(create); 
     }); 

     document.body.addEventListener("click", function(event) { 
      console.log(event.target.nodeName); 
      console.log(event.target.id); 
      var movenow = event.target.id; 
      if (movenow !== null && event.target.nodeName !== "BUTTON") { 
       document.getElementById(movenow).addEventListener('mousedown', hold, false); 
       document.body.addEventListener('mouseup', release, false); 
       function hold() { 
        document.getElementById(movenow).addEventListener('mousemove', move, true); 
        document.body.addEventListener('mousemove', move, true); 
       } 
       // ==> On Realease Function <== 
       function release() { 
        document.getElementById(movenow).removeEventListener('mousemove', move, true); 
        document.body.removeEventListener('mousemove', move, true); 
       } 
       function move(event) { 
        var epY = event.clientY; 
        var epX = event.clientX; 

        if (document.querySelectorAll("input[name='revertxy']:checked").length >= 1) { 
         epY = event.clientX; 
         epX = event.clientY; 
        } 

        event.target.style.position = 'absolute'; 
        event.target.style.top = epY + 'px'; 
        event.target.style.left = epX + 'px'; 
       } 
      } 
     }); 
    </script> 
</body> 
</html>

來源

2017-10-18 future

你需要使用的可拖動屬性：https://developer.mozilla.org/en-US/docs /網絡/ HTML/Global_attributes /拖動。你發佈的代碼甚至是如何使一個div可拖動？ – floor

你可以重新創建你在jsFiddle裏面試過的東西嗎？您分享的代碼並不一定有幫助，因爲我們無法重現該問題。 –

希望這將幫助，

const btn = document.querySelector('#btn'); 
 

 
btn.addEventListener("click", function() { 
 
    const div = document.createElement("div"); 
 

 
    div.className = 'draggable'; 
 

 
    div.addEventListener('mousedown', mouseDown, false); 
 
    document.body.appendChild(div); 
 

 
}); 
 

 
function mouseUp() { 
 
    this.removeEventListener('mousemove', move, true); 
 
    this.classList.remove('grabbing'); 
 
} 
 

 
function mouseDown(e) { 
 
    this.addEventListener('mousemove', move, true); 
 
    this.addEventListener('mouseup', mouseUp, true); 
 
    this.classList.add('grabbing'); 
 
} 
 

 
function move(e) { 
 
    this.style.position = 'absolute'; 
 
    this.style.top = getMousePosition(e).client.y - (this.clientWidth/2) + 'px'; 
 
    this.style.left = getMousePosition(e).client.x - (this.clientHeight/2) + 'px'; 
 
} 
 

 
function getMousePosition(evt) { 
 

 
    var pageX = evt.pageX; 
 
    var pageY = evt.pageY; 
 
    if (pageX === undefined) { 
 
    pageX = evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
 
    pageY = evt.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
 
    } 
 

 
    var rect = evt.target.getBoundingClientRect(); 
 
    var offsetX = evt.clientX - rect.left; 
 
    var offsetY = evt.clientY - rect.top; 
 

 
    return { 
 
    client: { 
 
     x: evt.clientX, 
 
     y: evt.clientY 
 
    } 
 
    }; 
 
}

.draggable { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
    background: #333; 
 
}

<button id="btn">Create a new moveabl div</button>

來源

2017-10-18 14:20:30 DININDU

對不起，你打敗了我 - 非常相似的答案。注意clientX和Y不適用於所有瀏覽器。還需要刪除偏移等，以在所有情況下獲得真正的鼠標位置。 –

@Matt_S嗨Matt_S感謝您的評論。我更新了答案。 – DININDU

<head> 
    <style> 
    body { position: relative} 
    div { 
     width:100px; height: 100px; 
     background:#f00; 
     position: absolute; 
    } 
    </style> 
</head> 
<body> 
     <button id = "ayoo">Create a new moveabl div</button> 

<script> 

var count = 0 
var moving=false; 
var mx,my; 

document.getElementById('ayoo').addEventListener('click', function() { 
     count++ 
     var mydiv = document.createElement("div") 
     mydiv.id= "aya"+count 
     document.body.appendChild(mydiv) 

     mydiv.addEventListener('mousedown', function (e) { 
      moving = true; 
      this.style.backgroundColor="#00ff00"; 
     }); 
     mydiv.addEventListener('mousemove', function (e) { 
      if(moving) { 
       getmouse(e); 
       this.style.top = my - 50; 
       this.style.left = mx - 50; 
      } 

     }); 
     mydiv.addEventListener('mouseup', function (e) { 
      moving = false; 
      this.style.backgroundColor="#ff0000"; 
     }); 
}); 

function getmouse(e){ 
    if (e.pageX || e.pageY) 
    { 
     mx = e.pageX; 
     my = e.pageY; 
    } 
    else if (e.clientX || e.clientY) 
    { 
     mx = e.clientX + document.body.scrollLeft; 
     my = e.clientY + document.body.scrollTop; 
    } 
} 

</script> 

</body>

來源

2017-10-18 14:25:16

如何讓每個新的div可拖動？

回答

相關問題