Question

我需要在kineticjs画布上检测从画布外部拖动的元素（来自select / listbox的一行）的放置事件。

画布中的kineticjs元素有很多拖放示例，但是如何检测外部元素的下降，特别是下降坐标？

非常鼓励JQuery提供任何帮助。

Answer 1

以下是将外部元素放入画布并报告拖放坐标的代码：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    #dragMe{border:3px solid blue; width:60px; background-color:cyan; line-height:30px;}
    canvas{border:3px solid red;}
</style>

<script>
    function allowDrop(ev){
        ev.preventDefault();
    }
    function drag(ev){
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    function drop(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        alert("You dropped [#"+data+"] in the canvas at: X="+ev.clientX+" and Y="+ev.clientY);
    }
</script>
</head>

<body>

    <p>Drag the text to the red canvas</p>
    <canvas id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></canvas>
    <br>
    <p id="dragMe" src="house-icon.png" draggable="true" ondragstart="drag(event)">Drag Me</p>

</body>
</html>

从外部元素检测动力学上的下落事件

1 个答案: