实现单个dom在页面随意拖拽

今天我做了实现单个dom在页面中随意拖拽效果，还可以直接给拖拽给扔出去。哈哈哈。我使用了draggable插件，所以还是比较简单的，但是很好玩哈哈哈

1.首先下载draggable插件 安装命令：

npm i draggable

2.你可以在你想要的页面引入，也可以全局引入，我使用的是全局引入 mian.js中：

import Draggable from 'draggable'

3.引入相关代码

这个是你要操作的dom元素

<div id="id">好好学习</div>

css在美化一下：

#id { background-color: rgb(0, 122, 255); border-radius:50%; font-size: 18px; color:white; width: 120px; height: 120px; text-align: center; line-height: 120px; }

方法一： 在main.js的script中写下面代码

mounted() { var element = document.getElementById("id"); var options = { grid: 10, onDrag: function() {} }; new Draggable(element, options); }

方法二： Using AMD/CommonJS:

var Draggable = require ('Draggable'); var element = document.getElementById('id'); new Draggable (element);

最终效果为： 以上就是我的成果嗯，大家可以尝试一下嘿嘿，挺好玩的 想要详细了解，可查阅： https://www.npmjs.com/package/draggable