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