在瀏覽器屏幕上拖放畫布

我是新來的Raphael以及JS ..我需要能夠將畫布本身而不是其中的對象拖動到屏幕上的各個位置。我在網上無處不在，找不到線索。當然，用戶將不得不嘗試在一些免費的地方抓住畫布......免受兒童物品傷害...在瀏覽器屏幕上拖放畫布

任何線索都將不勝感激。

這裏是我構建的畫布上這個網站：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
    <title>Raphael Play</title> 
    <script type="text/javascript" src="js/raphael.js"></script> 
    <script type="text/javascript" src="js/mood.js"></script> 
    <style type="text/css"> 
      #canvas_container { 
      position:absolute; 
       width: 803; 
      left:200px; 
      top:100px; 
      border: 0px solid #555; 
      -webkit-box-shadow: 0px 0px 84px #999; 
      -moz-box-shadow: 0px 0px 84px #999; 
      box-shadow: 0px 0px 84px #000; 
      border-radius: 20px 20px 20px 20px; 
      background-color:#fff; 
      background-image:url(static/VAZZZ.png); 
      } 
    </style> 
    </head> 
    <body> 
     <div id="canvas_container" ></div> 
    </body> 
</html>

來源

2011-12-29 DKean

下面是<div>一個跨瀏覽器拖放功能和事件偵聽器。

http://jsfiddle.net/MtbJe/

你的CSS是不完整的（沒有指定高度和寬度缺失「PX」）。
箱形陰影顯着降低了拖動的平滑度，您可能實際上想要在此實例中使用圖像（刪除箱形陰影以查看它有多平滑）。
如果你想在UI中做別的事情，那就是實際的拖動處理器（但仍然移動整個<div>），你將不得不改變事件監聽器來爲那個元素改變JavaScript的第15行：
```
var dragObj = e.target ? e.target : e.srcElement; 
```
喜歡的東西：
```
var dragObj = e.target ? e.target.parentNode : e.srcElement.parentNode; 
```

我有這個代碼保存了很多年，我相信原作者是http://www.quirksmode.org/噸我再也看不到它了。你會在這個網站上找到關於JS的很多很棒的信息。再次，這是一個跨瀏覽器的腳本，我不確定你需要給你使用畫布。如果您對JS非常陌生，並且正在使用DOM，那麼我確信代碼看起來有點混亂，我鼓勵您提出其他問題。

來源

2011-12-29 02:19:19 skyline3000

哇，Sameera，你真的知道你的東西！ – DKean 2011-12-29 14:08:01

但我無法讓它工作。我將您提供的腳本標記之間的JS代碼放在標題中。正如你懷疑的那樣，我對JS完全陌生！ – DKean 2011-12-29 14:21:32

我看到在小提琴中，如果你抓住靠近邊緣的畫布，畫布就會脫落。你建議用一個孩子拖動父母。我在FoxPro中看到過這個問題。孩子比表格更快地跟隨鼠標，父母從不退出。所以對你的期待是很讚賞的。我印象深刻。 – DKean 2011-12-29 14:30:01

在瀏覽器屏幕上拖放畫布

回答

相關問題