首頁 > 網際網路

HTML中如何拖動任一DIV 到任意位置

2019-12-12 02:56:52

在html頁面中想要拖動一個div到任意的位置,建議使用jquery ui的draggable功能,本文就為你詳細演示如何使用它

1

開啟瀏覽器,搜尋jquery ui,點選搜尋結果的第一項


2

在jquery ui的下載介面,直接點選【Stable】按鈕即可下載完整的jquery ui原始碼



3

開啟vscode建立一個h5規範的頁面,同時從jquery ui原始碼中拷貝jquery、jqueryui.css、jqueryui.js三個檔案到h5頁面的同級目錄


4

在頁面中新增一個div,設定class="ui-widget-content",再設定div的高度和寬度,與div的內容文字


5

新增JavaScript程式碼,為剛剛新增的div系結draggable拖動事件


6

在瀏覽器中開啟頁面,就可以看到效果,此時是可以隨意拖動這個div到頁面任何位置的




7

在瀏覽器中按F12,進入開發者模式,可以看到,這個效果實現的本質是:給div設定了相對定位,並繫結這個div的滑鼠拖動事件,時刻記錄div的位置,並設定div當前位置設定到left、top屬性中,從而使div可以停留在此處



IT145.com E-mail:sddin#qq.com