实现单个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