在浏览器屏幕上拖放画布

我是新来的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

在浏览器屏幕上拖放画布

回答

相关问题