Raphael Scope拖放n拖放多個紙張實例

我有兩個Raphael紙張實例。在這兩個我想要拖放一個元素（圓圈）。對我來說，將這兩個圓圈分配相同的ID非常重要。我預料沒有問題，因爲兩者都在不同的紙張實例中，因此在不同的範圍。發生什麼事是，當我至少點擊一次這兩個元素時，這兩個元素都會作出反應。但是，如果我給這些元素不同的ID一切正常（每個元素只調用其「開始」，「拖動」和「向上」的功能，如果周圍）。這是拉斐爾的預期行爲，我是否必須爲不同的紙張實例中的元素分配不同的ID？但願不是，你可以點我正確的方向:-) 非常感謝您的幫助提前，這裏談到的代碼：Raphael Scope拖放n拖放多個紙張實例

<!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>

來源

2013-11-01 donald

沒有創意？一個額外的信息：我使用Raphael 2.1.2。 – donald

據我所知，文件中的所有內容都必須是唯一的，在這裏不是這種情況。所以我認爲你需要找到解決方法。如果你說什麼限制你讓它們保持不變，那麼有人可能能夠找出解決方法。 – Ian

@Ian，THX爲您的答案。我希望能夠避免這種解決方法，因爲我確信每篇論文都有自己的範圍。看來，情況並非如此...... – donald

這裏是一個可能的解決方法，檢查什麼元素的父母是參加了這個活動。我應該說，你真的不想要兩個獨特的元素，你應該嘗試設計一種方法來避免這種情況。話雖這麼說，這種類型的解決方案可以給你的解決方法，一個想法....

所以我們只是有一個事件句柄開始，檢查本身...

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

我已經將它添加到這裏的小提琴，它只是顯示啓動處理程序，而不是拖動/鼠標彈出http://jsfiddle.net/kTYAs/。這種類型的解決方案可能更有用，因爲您只需要一個功能來實現開始，移動，向上移動

來源

2013-11-02 09:49:57 Ian

Raphael Scope拖放n拖放多個紙張實例

回答

相關問題