どのように新しい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/Web/HTML/Global_attributes/draggable。あなたが投稿したコードはどのようにして1つの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をドラッグ可能にするには？

答えて

関連する問題