Question

我是拉斐尔以及JS的新手。我需要能够将画布本身，而不是其中的对象，拖动到屏幕上的不同位置。我在网上无处不在，无法找到线索。当然，用户必须尝试在一些免费的地方抓住画布......没有儿童物品......

任何线索都将非常感激。

以下是我在此网站上构建Canvas的方法：

<!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>

Answer 1

以下是<div>的跨浏览器拖动功能和事件监听器。

http://jsfiddle.net/MtbJe/

您的CSS不完整（未指定高度且宽度缺失“px”）。
框阴影会显着降低拖动的平滑度，您可能实际上想要在此实例中使用图像（删除框阴影以查看它的平滑程度）。
如果你想在UI中创建其他东西是实际的拖动处理程序（但仍然移动整个<div>），你将不得不更改该元素的事件监听器并更改第15个JavaScript的一行来自：
```
var dragObj = e.target ? e.target : e.srcElement;
```
类似于：
```
var dragObj = e.target ? e.target.parentNode : e.srcElement.parentNode;
```

我已经将这段代码保存多年了，我相信原作者是http://www.quirksmode.org/，虽然我不再在那里看到它了。你会在这个网站上找到很多关于JS的好消息。同样，这是一个跨浏览器的脚本，我不确定你需要使用canvas。如果您是JS的新手并且使用DOM，那么我确信代码看起来有点令人困惑，我鼓励您提出其他问题。

将浏览器拖放到浏览器屏幕周围

1 个答案: