許多可拖動的圖像在屏幕上

我試圖建立一個頁面，所以我和我的團隊可以自由地在屏幕上放置一些圖像。問題是我無法弄清楚這些圖像可拖動的方法。我試圖找出自己，並找到了這個不錯的話題：HTML5 drag and drop to move a div anywhere on the screen?許多可拖動的圖像在屏幕上

我試着將這個想法應用到我的網頁，並將「getElementsByID」替換爲「getElementsByClassName」，但沒有骰子。

另外，如果可拖動的圖像是尊重頁面的響應度，那麼它會是兩倍的好，如果有人知道如何做到這一點。

這裏是codepen我嘗試：http://codepen.io/GuiHarrison/pen/EsHyr

謝謝！

來源

2013-03-01 Digger

嗯，我只是做了這個，它有點兒車，但你可以玩它。

<html> 
<head> 
    <style> 
     #mydiv{ 
     width: 100px; 
     height: 100px; 
     border: solid black 1px; 
     position: absolute; 
     } 
    </style> 
</head> 
<body> 
    <div id="mydiv" onmousedown="ismousedown(1)" onmouseup="ismousedown(0)" onmousemove="mousemove(event)"></div> 
    <script> 
     var mousedown = false; 
     function ismousedown(tf){ 
      if(tf == 1){ 
      mousedown = true; 
      } 
      else{ 
       mousedown = false; 
      } 
     } 
     function mousemove(event){ 
      if(mousedown){ 
       document.getElementById("mydiv").style.left=event.pageX; 
       document.getElementById("mydiv").style.top=event.pageY; 
      } 
     } 
    </script> 
</body>

來源

2013-03-01 14:25:16 Zachrip

謝謝，但盒子不能拖了，顯然。乾淨的代碼，但。 – Digger 2013-03-04 20:09:53

您可以使用kineticjs這一點。檢查這個！

http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

來源

2013-03-01 14:49:10 MJQ

謝謝！我看了很長時間，我仍然在爲這個問題而苦苦掙扎。當前版本的kinetic是4.3.3，看起來這個例子在新版本上崩潰了。或者我只是搞砸了大時間... – Digger 2013-03-04 20:17:30

許多可拖動的圖像在屏幕上

回答

相關問題