jquery-ui怎樣實現拖拽效果

2019-12-12 05:12:00

拖拽效果在網頁中很常見，一起來看看如何實現吧。

如圖所示，在HTML中介面引入jquery和jquery-ui，jquery一定要jquery-ui前面，否則無法實現想要的效果。

如圖所示，給div巢狀一個div，並且新增id。我給div新增了f和s的id。

如圖所示，設定f的style樣式效果，給它新增一個邊框即可。然後這就是f的預覽效果圖。

如圖所示，來再設定一下s的style樣式，大小不要超過之前的f，設定背景色為紅色。

如圖所示，基本樣式都寫完了。接著我們開始給紅色的div新增拖拽效果。使用("#s")來獲取到紅色的div，然後呼叫draggable方法來給獲取到的紅色div新增拖拽效果。

如圖所示，再去看HTML介面，這時候就可以用滑鼠拖拽紅色的div了。然後把它移動到黑色的邊框上。

如果我們想要把紅色div約束在黑色邊框裡面，那就新增這樣的一個屬性。

如圖所示，新增containment: "parent"就可以了。

新增containment: "parent"之後，紅色div無論怎麼拖拽都會被限制在黑色邊框裡面了。

當然，還可以限制紅色div的拖拽方向，比如設定axis屬性為y。這樣的話，紅色div只能往垂直方向拖拽，水平方向拖拽無效。