可拖曳的HTML5元素怎麼做?今天讓我來大顯身手!下次你就能出風頭啦!\ HTML5 Drag & Drop API-讓元素變得可拖曳 你可能不知道,過去在網頁裡面實現 Drag & Drop 是很麻煩的!一定要配合 CSS、onmousedown、onmouseup、setInterval() 等,才能做出元件拖曳的視覺效果。但!現在各位有福啦! HTML5 有直接的 Drag & Drop 機制,讓 前端工程師 可直接使用 drag and drop 的功能,讓使用者直接透過拖曳的方式,把要上傳的檔案拉到瀏覽器當中。 所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳,只要在該元素的原始碼中加入 draggable 屬性,如下例 (讓圖片變得可以拖曳): <img draggable="true" /> HTML5 Drag & Drop API 的範例 See the Pen HTML 5 Drag and Drop by Tedutw ( @Tedutw ) on CodePen . 讓元素可拖放-HTML的部分 除了<a>、<img>,其他 HTML 裡的元素本來是被預設為不可以作為源元素的,也就是說,我們本來是「拖不動」 它的。但在 HTML5 ,只要為它加上 draggable="true" 屬性,它就能「被拖曳」了。下面是上例的 HTML 碼的一部分: See the Pen HTML 5 Drag and Drop by Tedutw ( @Tedutw ) on CodePen . draggable 屬性上加了 draggable="true",這樣就能讓這個 div 元素變成可以拖曳的 (至少在 Chrome 中可以)。但是我們還需要使用 Javascript 在 dragstart 裡為 dataTransfer 設置一些數據,因此需要加上下面的代碼。這樣可以確保它可以被拖曳。 See the Pen HTML 5 Drag and Drop-2 by Tedutw ( @Tedutw ) on CodePen ...
留言
張貼留言