2013-02-28 33 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讀取文件。常用的方法是將其發送到服務器,然後服務器可以將信息發回,如縮略圖的路徑。

有很多現成的腳本已經,只是谷歌/冰。

相關問題