前言
这是html版本的。只是引用了vue的语法。
这是很多公司会出现的一种情况，就是原生的页面，引入vue的语法开发
这就导致有些vue上很简单的功能。放到这里需要转换一下
以前写过一个vue版本的帖子，现在再加一个html版本的。
另一个vue版本
需要看vue版本的，直接点击这里我另一个帖子看
跳转链接
效果图
这是弹框的可以拖动，并且不会超出页面，到了边缘就会停止拖不出去了。
这里一样的，div按住拖拽，这种是可以超出页面范围的
div拖拽代码
核心就是下面的自定义指令生成。
然后再div上面添加v-drag就可以使用了，很简单
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<!-- 公共css文件 -->
<link rel="stylesheet" href="/statics/css/common/common.css">
<!-- 公共js -->
<script src="/statics/vue_element/common.js"></script>
<!-- vue部分依赖 -->
<link rel="stylesheet" href="/statics/vue_element/element.css">
<script src="/statics/vue_element/vue.js"></script>
<script src="/statics/vue_element/element.js"></script>
<script src="/statics/vue_element/axios.js"></script>
<!-- 引入vue类型组件 -->
<title>div拖拽模板</title>
</head>
<body>
<div id="app">
<div class="wrap">
<div v-drag class="box">按住拖拽</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
directives: {
// 自定义指令 实现可拖动
drag(el, bindings) {
el.onmousedown = function (e) {
var disx = e.pageX - el.offsetLeft;
var disy = e.pageY - el.offsetTop;
document.onmousemove = function (e) {
el.style.left = e.pageX - disx + "px";
el.style.top = e.pageY - disy + "px";
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
};
};
},
},
data() {
return {};
},
methods: {}
})
</script>
<style scoped>
.box {
height: 100px;
width: 100px;
background-color: #ccc;
position: absolute;
top: 200px;
left: 100px;
cursor: pointer;
font-size: 20px;
}
.wrap {
position: relative;
}
</style>
</html>
弹框拖拽代码
这里也是一样的，我这里使用elementul的弹框组件
直接就是鼠标放到弹框的头部就会变成可移动的箭头。按住拖动。
功能实现也是自定义指令，然后再弹框上放一个v-drag就可以了。
注意是加载el-dialog标签上的。别加错了
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<!-- 公共css文件 -->
<link rel="stylesheet" href="/statics/css/common/common.css">
<!-- 公共js -->
<script src="/statics/vue_element/common.js"></script>
<!-- vue部分依赖 -->
<link rel="stylesheet" href="/statics/vue_element/element.css">
<script src="/statics/vue_element/vue.js"></script>
<script src="/statics/vue_element/element.js"></script>
<script src="/statics/vue_element/axios.js"></script>
<!-- 引入vue类型组件 -->
<title>div拖拽模板</title>
</head>
<body>
<div id="app">
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible" v-drag>
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,
formLabelWidth: '120px',
};
},
directives: {
// 自定义指令 实现可拖动
drag(el, bindings) {
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog')
// dialogHeaderEl.style.cursor = 'move';
dialogHeaderEl.style.cssText += ';cursor:move;'
dragDom.style.cssText += ';top:0px;'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = (function () {
if (window.document.currentStyle) {
return (dom, attr) => dom.currentStyle[attr]
} else {
return (dom, attr) => getComputedStyle(dom, false)[attr]
}
})()
dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop
const screenWidth = document.body.clientWidth // body当前宽度
const screenHeight = document.documentElement
.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)
const dragDomWidth = dragDom.offsetWidth // 对话框宽度
const dragDomheight = dragDom.offsetHeight // 对话框高度
const minDragDomLeft = dragDom.offsetLeft
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
const minDragDomTop = dragDom.offsetTop
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
// 获取到的值带px 正则匹配替换
let styL = sty(dragDom, 'left')
let styT = sty(dragDom, 'top')
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (styL.includes('%')) {
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
} else {
styL = +styL.replace(/\px/g, '')
styT = +styT.replace(/\px/g, '')
}
document.onmousemove = function (e) {
// 通过事件委托，计算移动的距离
let left = e.clientX - disX
let top = e.clientY - disY
// 边界处理
if (-(left) > minDragDomLeft) {
left = -(minDragDomLeft)
} else if (left > maxDragDomLeft) {
left = maxDragDomLeft
}
if (-(top) > minDragDomTop) {
top = -(minDragDomTop)
} else if (top > maxDragDomTop) {
top = maxDragDomTop
}
// 移动当前元素
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
}
document.onmouseup = function (e) {
document.onmousemove = null
document.onmouseup = null
}
}
},
},
})
</script>
<style scoped>
</style>
</html>
