0

我有两个 Raphael 论文实例。在两者中，我都想拖放一个元素（圆圈）。为这两个圈子分配相同的 ID 对我来说很重要。我预计没有问题，因为两者都在不同的论文实例中，因此在不同的范围内。发生的情况是，当我至少单击两个元素一次时，两个元素都会以某种方式做出反应。但是，如果我为这些元素提供不同的 ID，则一切正常（如果拖动，每个元素仅调用其“开始”、“拖动”和“向上”功能）。这是 Raphael 的预期行为吗？我是否必须为不同纸张实例中的元素分配不同的 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>

4

1 回答 1

0

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

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

   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

于 2013-11-02T09:49:57.947 回答