在浏览器屏幕周围拖放Canvas

Drag and Drop the Canvas around the browser screen

本文关键字：拖放 Canvas 周围 屏幕 浏览器      更新时间：2023-09-26

我对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>

这是<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非常陌生，那么我相信代码会看起来有点混乱，我鼓励你问更多的问题。

相关文章：