html5-canvas - 如何在放置事件 kineticjs 上获取舞台坐标

Question

我有一个带有文本的“p”元素。当“放置事件”被拍摄时，这些元素应该被放置在带有鼠标位置的舞台上。我的代码是：

html代码：

<ul>
  <li><p id= "1" draggable="true" ondragstart="drag(event)">Element1</p></li>
  <li><p id= "2" draggable="true" ondragstart="drag(event)">Element2</p></li>
  <li><p id= "3" draggable="true" ondragstart="drag(event)">Element3</p></li>
  <li><p id= "4" draggable="true" ondragstart="drag(event)">Element4</p></li>
  <li><p id= "5" draggable="true" ondragstart="drag(event)">Element5</p></li>
</ul>

JavaScript 代码：

    var stage,modsLayer;

    stage = new Kinetic.Stage({
              container: 'container',
              width: $('#container').width(),
              height: 600
    );
    stage.on('drop',function(e){
        //get stage mouse position coordinates to insert a text
    });
    modsLayer = new Kinetic.Layer(); 
    stage.add(modsLayer);

    $('.kineticjs-content canvas').attr('id','canvas');
    $('.kineticjs-content canvas').attr('ondrop','drop(event)');
    $('.kineticjs-content canvas').attr('ondragover','allowDrop(event)');

    function allowDrop(e) {
        e.preventDefault();
    };

    function drop(e) {  
      stage.fire('drop');  
    };

    function drag(e) { 
      switch(e.target.tagName){
        case "P":
          e.dataTransfer.setData("comp_id",e.target.id);
          e.dataTransfer.setData("comp_name",e.target.innerText);  
          e.dataTransfer.setData("tagName",e.target.tagName);
        break;
    };         

Answer 1

对于类似的情况，我使用 jQuery UI 可拖动功能（因为 HTML5 拖动功能似乎无法跨浏览器工作）首先标记我希望能够拖动到 Kinetic JS 画布上的图像（我的组件）并确定开始和停止功能：

$(".component").draggable
    cursor: "crosshair"
    cursorAt:
        left: 0
        top: 0
    distance: 10
    helper: "clone"
    opacity: 0.5
    start: (e, ui) ->
        layoutDragStart e, ui
    stop: (e, ui) ->
        layoutDragStop e, ui

（这是在咖啡脚本中）

使用以下 layoutDragStart（提取我要传输的数据）， layoutDragStop：

layoutDragStart = (e, ui) ->
    $(ui.helper).data "component", $(e.currentTarget).data("component")
    $(ui.helper).data "height", $(e.currentTarget).data("height")
    $(ui.helper).data "width", $(e.currentTarget).data("width")

layoutDragStop = (e, ui) ->
    height = $(ui.helper).data "height"
    width = $(ui.helper).data "width"
    x = (ui.position.left - $("#layoutCanvas").position().left + parseFloat(width) / 2)
    y = (ui.position.top - $("#layoutCanvas").position().top + parseFloat(height) / 2)

后面是向画布添加所需元素的代码。