jquery UI draggable學習

jquery UI組件中的draggable是個很強大的工具,能夠對元素進行各種方式的拖動。在其官網http://jqueryui.com/demos/draggable/上只是對一些參數和事件進行了介紹,沒有具體的例子進行說明。下面我就對平常使用率較高的一些選項進行講解:

1.axis:設置拖動的方向,值有‘x’,'y'兩個。x表示在水平位置上拖動,y表示在垂直方向上拖動。

2.cancel:設置禁止在某個元素上拖動。這個參數可以對一些元素進行選擇性的拖動,也可以對元素進行循環拖動和停止拖動。

3.containment:限制在什麼框架中拖動。常用的值爲parent,限制只能在父系框架中拖動。對於由多個div組成的一個框架,可以使用這個參數限制拖動的範圍只能在父框架中而不影響這個父框架中之外的元素。

4.connectToSortable:這個參數可以和jquery UI中的sortable結合使用。顧名思義,拖動相關元素可以進行排序以調整元素之間的位置。

5.drag事件:在拖動過程中,設置的回調函數會被調用。所以我們可以在這個回調函數中進行一些相關元素的處理,比如拖動時對一些元素的顏色和亮度進行調整,以達到一種忽明忽暗的效果。

6.start事件:開始拖動時觸發的事件。可以再這個事件中對一些只需要在拖動過程中展現的數據進行初始化,不用一打開網頁就初始化這些數據,以減輕數據庫的壓力。

7.stop事件:和start事件相反,結束拖動動作觸發的事件。當然可以在這個事件中將一些多餘的數據進行清除。

暫時能在應用中常用的一些參數和方法就是這些,以後會根據需求的變化增加和刪減一些參數。技術永遠是排在第二的,業務纔是第一位的。有了業務才能確定技術。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章