与拉斐尔一起拖放

发布于 2024-10-10 03:04:07 字数 1628 浏览 8 评论 0原文

你好，我是使用 raphael javascript 库的新手，我正在尝试创建一个简单的拖放；为了能够将克隆形状从画布外部拖动到画布 R 中，并且如果用户单击它，我希望能够删除所选克隆（用户在所选克隆上按删除键，克隆将被删除）我也想复制克隆并粘贴它。这是我的代码：

<html>  
<head>  
    <title>Raphael Play</title>  
   <script type="text/javascript" src="raphael.js"></script> 
   <script type="text/javascript" src="jquery.contextMenu.r2.js"></script>
   <style type="text/css"> 
   #canvas_container {   
           width: 500px;   
           border: 1px solid #aaa;   
        }   
    </style>
   <script>
window.onload = function() {
var nowX, nowY, w = 500, h=400, r=30, R = Raphael("canvas_container", w, h),
    c = R.circle(100, 100, r).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5,
    cursor: "move"
});

var clone=c.clone();

var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    // move will be called with dx and dy
    // restrict movement of circle to within boundaries
   if (this.ox + dx <= w - r && 
       this.oy + dy <= h - r &&
       this.ox + dx >= 0 + r && 
       this.oy + dy >= 0 + r)
   {
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
   } // else nothing
},
up = function () {
    // restoring state
    this.attr({opacity: .5});
};

clone.drag(move, start, up); 

};

// Create Context Menu

   </script>

</head>  
<body>  

    <div id="canvas_container"></div> 

</body>

原文

hello I am new to using the raphael javascript library I am trying to create a simple drag and drop; to be able to drag a clone shape from outside the canvas into the canvas R and I want to be able to delete the selected clone if the user clicks on it (user press delete on selected clone and clone gets removed) I also want to copy the clone and paste it. Here is my code:

<html>  
<head>  
    <title>Raphael Play</title>  
   <script type="text/javascript" src="raphael.js"></script> 
   <script type="text/javascript" src="jquery.contextMenu.r2.js"></script>
   <style type="text/css"> 
   #canvas_container {   
           width: 500px;   
           border: 1px solid #aaa;   
        }   
    </style>
   <script>
window.onload = function() {
var nowX, nowY, w = 500, h=400, r=30, R = Raphael("canvas_container", w, h),
    c = R.circle(100, 100, r).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5,
    cursor: "move"
});

var clone=c.clone();

var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    // move will be called with dx and dy
    // restrict movement of circle to within boundaries
   if (this.ox + dx <= w - r && 
       this.oy + dy <= h - r &&
       this.ox + dx >= 0 + r && 
       this.oy + dy >= 0 + r)
   {
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
   } // else nothing
},
up = function () {
    // restoring state
    this.attr({opacity: .5});
};

clone.drag(move, start, up); 

};

// Create Context Menu

   </script>

</head>  
<body>  

    <div id="canvas_container"></div> 

</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ら栖息 2024-10-17 03:04:07

每个拉斐尔形状都需要在画布内；它不可能在外面。您将需要使画布填充更大的区域以包含其他形状，也许需要借助样式。我不确定拥有多个拉斐尔画布是否效果很好，因为您需要使用其他形状的属性在另一个画布内创建一个新的拉斐尔形状。你可以做，但我不会做。另外，在使用带有 JavaScript 事件的删除按钮时要小心，因为浏览器使用它进行导航。

回复收藏 0 原文