dom-slide

介绍

可以将页面上任一元素变成可以拖动的元素，pc wap端均可以使用，并且可以定义其移动的范围以及移动的方向， 注意事项： 1.被定义为可以移动的元素，如果其所在父容器有滚动条。在移动的过程中可能会导致其 位置不准确 2. body容器有滚动条的时候，在移动的过程中不会影响其位置的准确性 3. 由于字元素的层级不会比父元素层级高，在父元素hidden时 可能会导致可拖动元素被父元素遮挡

vue中安装教程

1. npm i dom-slide
2. 使用组件内部单独引入，import {init} from 'dom-slide' 或者 import all from 'dom-slide'
3. 在created函数初始化，init()或者all.init() created() { init(); }
4. 在mounted函数里面注册testEvent事件,用于获取dom元素当前移动后的位置数据 mounted() { //订阅testEvent事件 window.Observer.addEventListen("testEvent", function (data) { console.log("callback" + data); console.log("top", JSON.parse(data).top); console.log("left", JSON.parse(data).left); }); }
5. 在需要移动的dom元素上添加data-drag属性，如： data-drag="box" data-range='parent' data-drag="box" data-range='screen' data-direction="vertical" data-drag="box" data-range='dom的id值'

其他框架以及原生开发参考vue

属性和事件

1. 属性 data-drag-------设置元素可以移动--必填---box(固定) data-range------元素移动范围------选填---parent(移动范围为父元素)/screen(移动范围为浏览器可视区域)(不填默认为此值) --------------------------------------- 移动范围元素的id data-direction--元素移动方向------选填---vertical(垂直移动)/landscape(横向移动)/all(不填默认为此值)

2. 事件 testEvent------鼠标提起或者手指松开时触发--参数data是个对象，包含属性如下：
   -----------------------------------------domId： 当前移动元素的id -----------------------------------------domClass：当前移动元素的class -----------------------------------------top: 当前移动元素距离起始点向下移动的距离(负值时说明是向上移动) -----------------------------------------left: 当前移动元素距离起始点向右移动的距离(负值时说明是向左移动)