draggable組件在web上創建一個可以拖動的元素。用戶可以拖動draggable組件到頁面的任何位置。     我們通過制作一個簡陋的便簽貼展示一下draggable的用法和效果。先上圖：     由于拖動是動態的過程，上圖作為靜態圖不能很好地表現。在實際頁面中，我們只要把鼠標放在便簽貼頂部天藍色區域（標題）中，就可拖動整個便簽貼在web頁面上移動。     接下來看一下上圖的實現代碼：

    id為note的div即為draggable，內部有id為title和content的兩部分。title就是天藍色的標題部分，content則是帶有網格線的部分。我們在最后的js腳本中，handle屬性指定可拖拽部分為“title”，這意味著我們能拖動標題部分，但不能拖動content部分。 draggable組件的屬性：

    proxy屬性用于組件的代理，他的參數由字符串和函數構成。proxy屬性可以由幾種值構成。如為“clone”字符串，組件將一個自身對象的“克隆”作為代理，從直觀上看，當拖動組件時，原位置會繼續保留一個一模一樣的組件。如指定了function參數，那么需要在function中編寫HTML及CSS等代碼，達到用戶自己想要的效果。下圖為“clone”時的拖動效果。     revert屬性如設為true,拖動停止并松開鼠標后，組件將回到被拖動前的位置。     cursor屬性為鼠標進入到可拖拽區域后變成的樣式，默認是可移動形狀（move）。此處鼠標樣式和CSS中的光標樣式一致，可使用的值有“help”、“pointer”、“crosshair”、“text”、“wait”等等，具體可參見css資料。     deltaX和deltaY分別為拖動組件時，鼠標離組件左邊界（deltaX）和上邊界（deltaY）的距離，數值可為正數也可為負數。正數時，鼠標向左（向上）偏離；負數時，鼠標向右（向下）偏離。     handle指定可拖動部分，已在前面部分進行說明。     edge指定了實際可拖動區域和handle指定的可拖動區域之間的邊距。假設edge值設為5，那么下圖中陰影部分為實際可拖動區域，陰影部分各邊界離handle指定的可拖動區域（整個天藍色區域）各邊界之間的距離為5像素。     draggable的方法和事件并不多，共4個方法和4個事件。 draggable組件的方法：

draggable組件的事件：

    draggable組件的事件也并不復雜。對于onBeforeDrag和onStartDrag而言，兩者在時機上有細微的差別，onBeforeDrag是拖動前觸發，是觸發時間最早的組件；onStartDrag是開始拖動的一瞬間觸發，時間略晚于onBeforeDrag。此外，onBeforeDrag是在代理屬性（proxy）指定的方法執行前觸發；onStartDrag則是代理屬性指定的方法執行之后才觸發。onDrag為拖動過程中執行；onStopDrag為拖動結束并松開鼠標后執行。四個事件的參數都一樣，均為DOM中的Event對象。關于Event對象請參考HTML和JS相關資料。     下列代碼實現了組件在拖動中動態顯示屏幕坐標的功能。