拖拽效果在網頁中還算比較常見， 今天我就來分享一下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 【jquery】如圖， 使用("#s")來獲取到紅色的div， 然后調用draggable方法來給獲取到的紅色div添加拖拽效果 。




08 如圖， 再去看HTML界面， 這時候就可以用鼠標拖拽紅色的div了 。 如圖所示， 小編我就把它移動到了黑色的邊框上 。




09 而如果我們想要把紅色div約束在黑色邊框里面， 則可以添加這樣的一個屬性 。 如圖， 添加containment: "parent"就可以了 。




10 添加containment: "parent"之后， 紅色div無論怎么拖拽都會被限制在黑色邊框里面了哦 。




11 當然， 還可以限制紅色div的拖拽方向， 比如我就設置它的axis屬性為y 。




12 這樣的話， 紅色div只能往垂直方向拖拽， 水平方向拖拽無效的哦 。






以上內容就是jquery的內容啦， 希望對你有所幫助哦！

猜你喜歡

• HTML文字顯示如何添加投影效果？
• WPS表格中如何設置圖形為三維效果？
• 教你做PS繪制爆炸的星球效果
• 文人墨客共茶情誼，苦蕎茶的效果
• premiere的方向模糊效果怎么使用
• premiere的吸色管填充效果怎么使用
• 南路邊茶減肥抑癌效果，玫瑰花的療效
• 如何利用PPT制作汽車里程表動畫效果
• PPT制作設置幻燈片之間切換過程的分割動畫效果
• PS如何制作暈染文字效果？