0

Raphael 紙のインスタンスが 2 つあります。どちらも、要素 (円) をドラッグ アンド ドロップしたいと考えています。これらの両方のサークルに同じ ID を割り当てることが重要です。どちらも異なる紙のインスタンスにあり、したがって範囲が異なるため、問題はないと予想しました。何が起こるかというと、両方の要素を少なくとも 1 回クリックすると、どういうわけか両方の要素が反応するということです。ただし、これらの要素に異なる 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

イベントを受け取った要素の親が何であるかを確認するための回避策を次に示します。2 つのユニークな要素は必要ありません。これを回避する方法を試して設計する必要があります。そうは言っても、このタイプのソリューションは回避策のアイデアを提供する可能性があります....

したがって、それ自体をチェックする start 用のイベント ハンドルが 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 を実装するためにそれぞれ 1 つの関数しか必要ないという点で、より便利です。

于 2013-11-02T09:49:57.947 に答える