2013-02-28 53 views
0

我想开发一个小网站,用户可以拖放图片。因此,当用户拖动特定的图片框它将返回某种结果的像有关的画面细节文本的形式...你可以通过拖放框来触发某种类型的事件吗?

这是我使用来实现拖放当前代码,但我无法弄清楚如何添加我上述的功能:

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

回答

0

drop事件可以有一个files财产。您可以使用JavaScript读取文件。常用的方法是将其发送到服务器,然后服务器可以将信息发回,如缩略图的路径。

有很多现成的脚本已经,只是谷歌/冰。

相关问题