原生实现拖拽进行css定位的小工具

最新推荐文章于 2021-09-25 15:20:13 发布

noobFrontEnd

最新推荐文章于 2021-09-25 15:20:13 发布

阅读量1.2k

点赞数

分类专栏： javascript 前端 js插件文章标签：插件 css 拖拽 javascript

本文链接：https://blog.csdn.net/github_33777703/article/details/75893802

版权

本文介绍了一个利用JavaScript实现的拖拽定位小插件，通过添加特定类名，用户可以简单地通过拖动元素来实现CSS定位。拖拽后，文本框显示相应坐标值，可用于CSS文件中设置元素位置。

摘要由CSDN通过智能技术生成

有些时候，用CSS实现一些不是太精确的定位，比如说不是严格的居中，或者是想把元素摆在自己想放的地方的时候往往比较麻烦，在没学JS的时候我也耐着性子调了一阵子，在学了JS拖拽这个功能之后决定要做一个简单的拖动就能实现CSS定位的JS小插件

首先把需要拖拽的元素加上drag类名，给相对定位的元素加上wrap 类名。点击拖拽元素放到想放的位置之后松开鼠标，将下方出现的文本框中的值复制下来，右击复制按钮可以删除创建出来的文本框。
复制之后在CSS文件中增加.drag 属性并将值粘贴到CSS文件中即可。

代码中复制数值到剪贴板的功能使用了clipboard.js 这个库，这是它的主页和 GitHub主页代码在head中创建script标签引入了这个库，特此说明。

/**
 * 生成一个input标签。向剪贴板写数据
 */
var cdnSrcipt = document.createElement("script");
cdnSrcipt.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboar

关注

专栏目录