jquery
拖拽效果在網頁中還算比較常見，今天我就來分享一下jquery-ui怎樣實現拖拽效果。
工具/材料
電腦
jquery，jquery-ui插件
vscode（其他編輯器也可以）
操作方法
-
01
第一步，在HTML中界面引入jquery和jquery-ui，注意jquery一定要jquery-ui前面，不然會報錯，無法實現想要的效果。
-
02
然后給div嵌套一個div，并且添加id，結構如圖所示。我就給div添加了f和s的id。
-
03
然后設置f的style樣式效果，給它添加一個邊框即可。
-
04
如圖，這就是f的預覽效果圖。
-
05
然后再設置一下s的style樣式，大小不要超過之前的f，設置背景色為紅色。
-
06
如圖，基本樣式都寫完了。默認情況下，元素是沒有拖拽效果的，接著我們開始給紅色的div添加拖拽效果。
-
07
如圖，使用("#s")來獲取到紅色的div，然后調用draggable方法來給獲取到的紅色div添加拖拽效果。
-
08
如圖，再去看HTML界面，這時候就可以用鼠標拖拽紅色的div了。如圖所示，小編我就把它移動到了黑色的邊框上。
-
09
而如果我們想要把紅色div約束在黑色邊框里面，則可以添加這樣的一個屬性。如圖，添加containment: "parent"就可以了。
-
10
添加containment: "parent"之后，紅色div無論怎么拖拽都會被限制在黑色邊框里面了哦。
-
11
當然，還可以限制紅色div的拖拽方向，比如我就設置它的axis屬性為y。
-
12
這樣的話，紅色div只能往垂直方向拖拽，水平方向拖拽無效的哦。
- End
- 發表于 2017-10-23 00:00
- 閱讀 ( 762 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章