0

我需要检测从画布外部拖动的元素的 kineticjs 画布上的放置事件（来自选择/列表框的一行）。

画布中有很多 kineticjs 元素的拖放示例，但是如何检测来自外部元素的拖放，尤其是拖放坐标？

强烈鼓励来自 JQuery 的任何 dnd 帮助。

4

1 回答 1

2

这是将外部元素拖放到画布中并报告放置坐标的代码：

<!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>
于 2013-02-14T07:23:22.723 回答