C# + Drag Drop Text over Image

Question

Could you please let me know how can I do this? any hint/sample code will be highly appreciated.

Thanks, Roop

Answer 1

There are a couple of ways you can do it, HTML5 has drag&drop (D&D) built in. You could add a data-attribute which holds the co-ordinates of the dropped element.

Data Attribute

<p id="textField" data-coords="0,0">Text</p>

<script>
// 'Getting' data-attributes using getAttribute
var textField= document.getElementById('textField');
var textCoords = plant.getAttribute('data-coords'); 

// 'Setting' data-attributes using setAttribute
textField.setAttribute('data-coords',); 
</script>

Here is a Fiddle I found on HTML5: dragover(), drop(): how get current x,y coordinates?

http://jsfiddle.net/kKuqH/2002/

You can concatenate dm.style.left + ', ' + dm.style.top

And set the concatenated value in the textField.setAttribute('data-coords', coords);

From there you can get the data-attribute in ASP.NET and post it into the database.

Just an outline.