Перетаскивание на холст HTML5

Я перетаскиваю элемент html и падаю на холст, вынимаю место, где его отбрасывают, и вырезаем объект в том же месте на холсте. Но показ в другом месте. См. Мой code.Перетаскивание на холст HTML5

Script

function init() { 
    var canvas = document.getElementById("graphCanvas"); 
    var context = canvas.getContext("2d"); 

    context.lineWidth = 2; 
} 

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"); 
    document.getElementById("graphCanvas").getContext("2d").drawImage(document.getElementById(data), 
     ev.clientX, ev.clientY); 
}

HTML

<body onload="init();"> 
    <canvas id="graphCanvas" ondrop="drop(event)" ondragover="allowDrop(event)" height=300 width=300 style="border:1px solid #000000;"></canvas> 
    <img id="img1" src="http://static.tumblr.com/vcbmwcj/foumiteqs/arrow_up_alt1.svg" draggable="true" ondragstart="drag(event)"/> 
</body>

источник

2013-09-30 N K

Fixed. Обновленный код: http://jsfiddle.net/YXxsH/5/. Расчеты выполняются с pageX и pageY и изображениями offset значений.

источник

2013-09-30 09:26:32 ViliusL

Извините, неважно, что переменная не используется. Проблема все еще не исправлена –

, тогда вы можете уточнить проблему? - edit: понял – ViliusL

Уже выяснено в вопросе, отбрасывая в одном месте рендеринг в другом месте. –

Перетаскивание на холст HTML5

ответ

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