今天我做了实现单个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