キャンバスの外側 (選択/リストボックスからの行) からドラッグされている要素の kineticjs キャンバスでドロップ イベントを検出する必要があります。
キャンバス内の kineticjs 要素のドラッグ アンド ドロップの例はたくさんありますが、外部要素、特にドロップ座標からのドロップを検出するにはどうすればよいですか?
JQuery からの任意の dnd ヘルプを強くお勧めします。
外部要素をキャンバスにドロップし、ドロップ座標を報告するコードは次のとおりです。
<!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>