Обнаружение события drop on kineticjs извне элементов

Мне нужно обнаружить событие drop на кинетическом холсте элемента, который перетаскивается из-за границы холста (строка из select/listbox).Обнаружение события drop on kineticjs извне элементов

Есть много примеров перетаскивания для элементов кинетики внутри холста, но как я могу обнаружить капли из внешних элементов, в частности, координаты падения?

Любая помощь от JQuery настоятельно рекомендуется.

источник

2013-02-13 jensk

Вот код уронить внешний элемент в холст и сообщить координаты падения:

<!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-14 07:23:22 markE

Спасибо, да, что делает это - и даже в простом HTML. Благодаря! Здесь есть живая демонстрация, которая частично работает: http://jsfiddle.net/jensk/5MZR7/ Javascript, очевидно, объявлен после HTML в jsfiddle. – jensk

Обновленный код предварительного просмотра для работы в качестве кода выше, используя ненавязчивый JQuery JS: http://jsfiddle.net/jensk/5MZR7/ Позиции clientX/Y из события, по-видимому, относятся к окну/iFrame. Как получить положение холста X/Y из обработчика событий, чтобы я мог их вычесть? – jensk

Чтобы получить положение холста относительно документа, используйте $ ("# myCanvas"). Offset(), а затем получите доступ к свойствам .Left и .Top. – markE

Обнаружение события drop on kineticjs извне элементов

ответ

Смежные вопросы