123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171 |
- // import Vue from 'vue'
- import debounce from 'lodash/debounce'
- export default function (Vue) {
- Vue.directive('drag', {
- bind(a, binding) {
- let isStart = false; // 是否已经开始拖拽
- let distance = {}; // 拖动的距离
- let l, t, x, y; // 当前被拖动的距离
- let w; // 当前屏幕宽度
- let h; // 当前屏幕的高度 // 移动端
- const dragElem = a;
- let firstTime = '',
- lastTime = ''; //记录鼠标按下松开时间
- dragElem.addEventListener(
- 'touchstart',
- function (e) {
- isStart = true // 如果没有开始拖拽, 则可以拖拽
- if (!e.changedTouches[0]) return;
- const {
- clientX,
- clientY
- } = e.changedTouches[0];
- x = clientX - e.changedTouches[0].target.x;
- y = clientY - e.changedTouches[0].target.y;
- w = document.body.clientWidth; // 当前屏幕宽度
- h = document.body.clientHeight; // 当前屏幕的高度
- }, {
- passive: false
- }
- )
- debounce; //防抖
- dragElem.addEventListener(
- 'touchmove',
- debounce(function (e) {
- // e.preventDefault()
- l = e.changedTouches[0].clientX - x;
- t = e.changedTouches[0].clientY - y;
- if (l < 0 && t < 0) {
- a.style.left = 0 + 'px';
- a.style.top = 0 + 'px';
- } else if (l < 0 && t + a.clientHeight < h) {
- a.style.left = 0 + 'px';
- a.style.top = t + 'px';
- } else if (l < 0 && t + a.clientHeight >= h) {
- a.style.left = 0 + 'px';
- a.style.top = h - a.clientHeight + 'px'
- } else if (l + a.clientWidth > w && t < 0) {
- a.style.left = w - a.clientWidth + 'px';
- a.style.top = 0 + 'px';
- } else if (l + a.clientWidth < w && t + a.clientHeight >= h) {
- a.style.left = l + 'px';
- a.style.top = h - a.clientHeight + 'px'
- } else if (l + a.clientWidth < w && t < 0) {
- a.style.left = l + 'px';
- a.style.top = 0 + 'px';
- } else if (l + a.clientWidth > w && t + a.clientHeight < h) {
- a.style.left = w - a.clientWidth + 'px';
- a.style.top = t + 'px';
- } else if (l + a.clientWidth > w && t + a.clientHeight >= h) {
- a.style.left = w - a.clientWidth + 'px';
- a.style.top = h - a.clientHeight + 'px';
- } else {
- a.style.left = l + 'px';
- a.style.top = t + 'px';
- }
- }, 5), {
- passive: false
- }
- );
- dragElem.addEventListener(
- 'touchend',
- function (e) {
- isStart = false
- document.ontouchmove = null
- document.ontouchmove = null
- distance = {
- type: 'move',
- clientX: x - e.changedTouches[0].clientX, // 拖动的 x 距离
- clientY: y - e.changedTouches[0].clientY // 拖动的 y 距离
- }
- // binding.value(distance) // 返回拖动的距离
- }, {
- passive: false
- }
- );
- dragElem.onmousedown = function (e) {
- e.stopPropagation();
- // e.preventDefault()
- if (!e.target.className.includes('darg-div') && !e.target.className.includes('sm-panel-header')) {
- return
- }
- if (e.target.className == "min-solider" || e.target.className == "sm-input sm-input-long" || e.target.className == "sm-input-long" || e.target.className == "sm-input-right") { //
- e.stopPropagation();
- return;
- }
- dragElem.setAttribute('data-flag', false) //防止拖动时触发点击事件
- firstTime = new Date().getTime();
- // a.style.minWidth = a.clientWidth + 'px';
- w = document.body.clientWidth; // 当前屏幕宽度
- h = document.body.clientHeight; // 当前屏幕的高度
- if (isStart) return; // 如果已经开始拖拽, 返回
- isStart = true; // 如果没有开始拖拽, 则可以拖拽
- const {
- clientX,
- clientY
- } = e;
- const x = clientX - a.offsetLeft;
- const y = clientY - a.offsetTop;
- document.onmousemove = debounce(function (e) {
- e.preventDefault();
- e.stopPropagation();
- l = e.clientX - x;
- t = e.clientY - y;
- if (l < 0 && t < 0) {
- a.style.left = 0 + 'px';
- a.style.top = 0 + 'px';
- } else if (l < 0 && t + a.clientHeight < h) {
- a.style.left = 0 + 'px';
- a.style.top = t + 'px';
- } else if (l < 0 && t + a.clientHeight >= h) {
- a.style.left = 0 + 'px';
- a.style.top = h - a.clientHeight + 'px';
- } else if (l + a.clientWidth > w && t < 0) {
- a.style.left = w - a.clientWidth + 'px';
- a.style.top = 0 + 'px';
- } else if (l + a.clientWidth < w && t + a.clientHeight >= h) {
- a.style.left = l + 'px';
- a.style.top = h - a.clientHeight + 'px'
- } else if (l + a.clientWidth < w && t < 0) {
- a.style.left = l + 'px';
- a.style.top = 0 + 'px';
- } else if (l + a.clientWidth > w && t + a.clientHeight < h) {
- a.style.left = w - a.clientWidth + 'px';
- a.style.top = t + 'px';
- } else if (l + a.clientWidth > w && t + a.clientHeight >= h) {
- a.style.left = w - a.clientWidth + 'px';
- a.style.top = h - a.clientHeight + 'px';
- } else {
- a.style.left = l + 'px';
- a.style.top = t + 'px';
- }
- }, 5)
- document.onmouseup = function (e) {
- document.onmousedown = null;
- document.onmousemove = null;
- isStart = false;
- // onmouseup 时的时间,并计算差值
- lastTime = new Date().getTime();
- if ((lastTime - firstTime) < 200) {
- dragElem.setAttribute('data-flag', true)
- }
- distance = {
- type: 'move',
- clientX: clientX - e.clientX, // 拖动的 x 距离
- clientY: clientY - e.clientY // 拖动的 y 距离
- }
- // binding.value(distance) // 返回拖动的距离
- }
- }
- }
- })
- }
|