# dom-slide

**Repository Path**: account68/dom-slide

## Basic Information

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

- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-02-07
- **Last Updated**: 2023-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dom-slide

#### 介绍

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


#### vue中安装教程

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

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

#### 属性和事件

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

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