Question

我有两个Raphael纸张实例。在两者中我想拖放一个元素（圆圈）。对我来说，为这两个圈分配相同的ID非常重要。我预计没有问题，因为两者都在不同的纸张实例中，因此在不同的范围内。当我点击两个元素至少一次时，会发生什么，两个元素以某种方式反应。但是，如果我给这些元素不同的ID一切正常（每个元素只调用它的“开始”，“拖动”和“向上”功能，如果绕过）。这是拉斐尔的预期行为吗？我是否必须为不同的纸质实例中的元素分配不同的ID？希望不是，你可以指出我正确的方向:-) 非常感谢您的帮助，代码如下：

<!doctype html>
<html>
<head>
        <meta charset="utf-8" />
        <title>DragNDrop</title>   
        <script src="raphael-min.js"></script>
</head>
<body>
    <h1>Paper1</h1>
    <div id="divPaper1" style ="height: 150px; width: 300px; border:thin solid red"></div>
    <h1>Paper2</h1>
    <div id="divPaper2" style ="height: 150px; width: 300px; border:thin solid red"></div>
    <script>
        start1 = function () {
            console.log("start1");
        }
        drag1 = function () {
            console.log("move1");
        }
        up1 = function () {
            console.log("up1");
        }
        start2 = function () {
            console.log("start2");
        }
        drag2 = function () {
            console.log("move2");
        }
        up2 = function () {
            console.log("up2");
        }
        var paper1 = Raphael("divPaper1", "100%", "100%");
        var circle1 = paper1.circle(40, 40, 30);
        circle1.attr("fill", "yellow");
        circle1.id = "circle";        //both circles get the same id
        circle1.drag(drag1, start1, up1);
        paper2 = Raphael("divPaper2", "100%", "100%");
        var circle2 = paper2.circle(40, 40, 30);
        circle2.attr("fill", "red");
        circle2.id = "circle";        //both circles get the same id
        circle2.drag(drag2, start2, up2);
    </script>
</body>

Answer 1

这是一个可能的解决方法，用于检查该事件的元素的父级是什么。我应该说，你真的不想要两个独特的元素，你应该尝试设计一种方法来避免这种情况。话虽这么说，这种类型的解决方案可以为您提供解决方法的想法....

所以我们只需要一个启动事件句柄来检查自己......

   start = function () {
        if( this.paper.canvas.parentElement.id == 'divPaper1' ) {
            console.log( 'from divpaper1');
        } else {
            console.log( 'from divpaper2');
        };
    }

我在这里添加了一个小提琴，它只显示了启动处理程序，而不是拖动/鼠标添加http://jsfiddle.net/kTYAs/。这种类型的解决方案可能更有用，因为您只需要一个函数来实现start，move，up

Raphael Scope拖放多个纸张实例

1 个答案: