如何為要拖動的圖像創建放置區？

Question

javascript或html是否可以為用戶拖動的圖像創建放置區域？ 我想這是一個圖像占位符，它可以接受頁面處於活動狀態時拖動到其中的圖像嗎？

Answer 1

最近， http：//www.dropzonejs.com/變得非常流行。

Answer 2

圖片來自哪里？ 如果您希望能夠從網頁本身拖動圖像，那是可能的，但是如果您希望從外部拖放圖像，那是可以的。 根本無法使用JavaScript。 目前很難。

編輯：正如@John Boker所提到的，這是可能的，但是目前，這些API是高度非標准的，並且在瀏覽器之間差異很大。 HTML 5為此將支持標准且更簡單的API，但是HTML 5本身還不是標准。

一些資源：

• HTML5拖放文件API-當前僅在Firefox中有效，有望很快成為標准
• VBDataObject接口 -僅在IE中有效

Answer 3

簡短答案：可以，但是您的瀏覽器需要支持HTML5中的拖放和文件API。 目前，只有Chrome 8+和Firefox 3.6+。

2011年7月更新 ：當前支持此功能的瀏覽器是Chrome，Firefox，Safari 6（如果使用FormData對象，則為Safari 5）和IE 10 Preview2。 此處有更多信息。

IE 8和9無法正常工作，不確定IE9 final是否會更改此設置。

Safari 5（與Apple宣稱的HTML5一樣多）不支持必需的File API，並且無法識別本機資源的DnD（可以使頁面內的DnD正常工作，但這僅是問題的一半）。 您可以通過以下方式來解決Safari 5中的這種不足：使用一種設計為“ FILE”類型的INPUT字段的樣式，以實際上不顯示文件路徑欄，並利用將拖放到Safari中的文件上傳框中的事實來插入完整的文件名-您可以使用一些JavaScript來觸發上傳，一旦它們丟失並中提琴。 這是專門針對該黑客的教程 。

Opera似乎都不支持這兩種API －我已經讀到它們正在等待HTML5規范的爭奪，直到塵埃落定之后，再添加對執行此操作所需的那些API的支持。

我實際上是上面鏈接的HTML5拖放/文件API上載教程的作者 ，並使用該方法在imgscalr.com上實現了您想要的內容 -如果您想將其下拉並查看如何對JavaScript進行大量評論我在做

希望有所幫助。