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