1. 程式人生 > >HTML5 檔案拖拽操作

HTML5 檔案拖拽操作

html5檔案拖拽,支援html頁面內部內容拖拽,文字,圖片等。同時支援pc本地檔案拖拽。

drag & drop

dragenter : 拖拽移入事件

dragleave :拖拽移開事件

dragover : 拖拽放入前需要取消的預設事件的事件

 e.preventDefault(); //阻止該事件的預設事件
            e.stopPropagation(); //阻止冒泡事件

drop : 拖拽放入事件,放入後可以獲取放入內容,錄入,文字,圖片,pc本機檔案等。

e.dataTransfer.files.length :: 如果拖拽的是檔案,這個可以判斷是否存在檔案,因為files永遠是ture

e.dataTransfer.files :獲取files檔案集合

e.dataTransfer.getData('text/plain') :獲取拖拽到的文字

e.dataTransfer.getData('text/uri-list') : 獲取拖拽到的圖片列表。