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

在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可以逗留在此處