拖放拉斐尔

你好我是新来使用拉斐尔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>

来源

2011-01-05 user563631

请在未来给您的问题提供更多的描述性标题。 – 2011-01-05 08:44:50

每拉斐尔形状必须是一个画面内;它不能在外面。您需要使画布填充更大的区域以包含其他形状，可能需要借助样式。我不确定它是否可以很好地使用多个Raphael画布，因为您需要使用其他画布的属性在另一个画布内创建一个新的Raphael形状。你可以做到，但我不会这样做。另外，请小心使用带有JavaScript事件的删除按钮，因为它用于浏览器的导航。

来源

2011-01-05 11:46:15