生活必備咖啡因程式碼-店長Yui大小事

Python這個名字真讓人非常的好奇到底是怎麼來的!!讓我們聽創辦人怎麼說!!

Python-是劇團，不是大蟒蛇

Python不是蟒蛇的意思? 程式語言的命名比你想得還有趣! 

HTML5怎麼實現及實行能拖曳的元素呢?讓有經驗的資深工程師來告訴你!!

HTML5 Drag & Drop API-讓元素變得可拖曳

<img draggable="true" />

HTML5 Drag & Drop API 的範例

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

踏入前端工程師領域必備的九堂 HTML5 課(九-上)-Drag and Drop API簡介(上)

HTML5 Drag & Drop API-讓元素變得可拖曳

以前在網頁裡面實現 Drag & Drop 是很麻煩的，需要配合 CSS、onmousedown、onmouseup、setInterval() 等，才能做出元件拖曳的視覺效果。現在 HTML5 有直接的 Drag & Drop 機制，讓前端工程師可直接使用 drag and drop 的功能，讓使用者透過拖曳的方式，把要上傳的檔案拉到瀏覽器當中。

這裡透過HTML5教你怎麼操作來源和目標做操作?一些步驟讓你啞口無言!!

數據傳輸DataTransfer

• setData(format, data)：用於添加數據，一般 format 對應於 MIME 類型字符串，常見的有 text/plain、text/html 及 text/uri-list 等，但同時也可以是任意自定義的類型；很不幸的是 data 只能是 string 或 file。
• getData(format)：用於獲取數據。

draggable.addEventListener（'dragstart'，（ev）=> { 
  ev.target.style.opacity = “。5” ;

  //設置ID
   ev.dataTransfer.setData（'text / plain'，ev.target.id）; 
}）;

dropzones.forEach（（dropzone）=> { 
  dropzone.addEventListener（'drop'，（ev）=> { 
    ev.preventDefault（）
    ev.target.style.borderStyle = 'solid' ;

    //獲取ID const sourceId = ev.dataTransfer.getData（'text / plain'）    
    ev.target.appendChild（document .getElementById（sourceId））  }）}）;

• 在 dragstart 時，透過 setData 將 ID 放入 DataTransfer 中
• 在drop事件中，透過 getData 獲取元素 ID ，並透過 appendChild 加入到藍色的目標元素中。

HTML5裡Web Storage 的優點有什麼?憑什麼取代了cookies呢?

踏入前端工程師領域必備的九堂 HTML5 課(七)-Web Storage 瀏覽器儲存簡介