HTML5之前,要實現網頁元素的拖放操作,需要依靠mousedown、mousemove、mouseup等API,透過大量的JS程式碼來實現;HTML5中引入了直接支援拖放操作的API,大大簡化了網頁元素的拖放操作程式設計難度,而這些API除了支援瀏覽器內部元素的拖放外,同時支援瀏覽器和其它應用程式之間的資料互相拖曳。
本文透過一個簡單範例,示範HTML5中拖放API的使用方法。
場景:
如下圖所示,我們要實現:
透過拖曳將照片從左側「相簿」區域拖曳到右側「垃圾箱」區域;拖曳過程中,「溫馨提示」部分要及時提醒,目前正在進行拖曳操作;
實作方法:
如上介面的HTML程式碼較簡單,如下:
target.appendChild(oldElem); info.innerHTML="