Can you trigger some type of event with drag and drop boxes?
<p>I'm trying to develop a small site where user can drag and drop pictures.  So when user drags a particular picture to the box it would return some kind of a result in the form of text like details about that picture...</p>

<p>This is the current code that I'm using to accomplish drag and drop, but I can't figure out how to add functionality that I described above:</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset ="utf-8"&gt;
    &lt;style type="text/css"&gt;
        #dragBox {width:336px;height:221px;padding:10px;border:1px solid #aaaaaa;}
    &lt;/style&gt;
    &lt;script&gt;
    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");
        ev.target.appendChild(document.getElementById(data));
    }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body bgcolor="#333333"&gt;
&lt;div div align="center"&gt;
    &lt;img id="drag1" src="foodOne.jpg" draggable="true" ondragstart="drag(event)" width="336" height="221"&gt;
    &lt;div id="dragBox" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
