拖曳插件draggable的功能是拖動被綁定的元素，當(dāng)這個jQuery UI插件與元素綁定后，可以通過調(diào)用draggable()方法，實現(xiàn)各種拖曳元素的效果，調(diào)用格式如下：
$(selector). draggable({options})
options參數(shù)為方法調(diào)用時的配置對象，根據(jù)該對象可以設(shè)置各種拖曳效果，如“containment”屬性指定拖曳區(qū)域，“axis”屬性設(shè)置拖曳時的坐標(biāo)方向。
例如，在頁面中的<div>元素中添加兩個子類<div>，通過與拖曳插件綁定，這兩個子類<div>元素只能在外層的父<div>元素中任意拖曳，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于使用jQuery UI插件draggable綁定了兩個子類<div>元素，并將配置對象的“containment”屬性值設(shè)為“parent”，因此，這兩個子類<div>元素只能在外層的父框中實現(xiàn)任意拖曳。
我來試試，親自調(diào)用jQuery UI插件draggable，使元素指定的坐標(biāo)方向拖曳。
在下列代碼的第18、19行，調(diào)用draggable插件的draggable()方法，分別使id號為“x”和“y”的<div>元素只能沿X軸和Y軸拖曳。
draggable()方法將元素也拖曳插件相綁定。draggable()方法時，通過axis屬性設(shè)置移動時的坐標(biāo)方向，該屬性值為x時，表示只能沿X軸方向拖曳，為y時，表示只能沿Y軸方向拖曳。請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報