拖拽包

因为每一次去实现拖拽功能，都要手动的去添加事件，编写逻辑，所以这次试着将拖拽功能给封装一下，下次用的时候可以比较方便的使用：

demo下载:

https://pan.baidu.com/s/1C3qFvFaGIMmZ3QMPNTinwg

使用说明:

    window.initRollingBall({
        parentID:"content-control",//默认body
        scrollID:"main-container",//滚动容器对象
        zIndex:2001,//弹出的拖拽对象的层级(默认1001)
        css:"top:30px;bottom:50px;",
        self:true,//设置为true表示拖拽自身以滑动
        targetElement:['form','div']//如果设置self为true,这个字段表示触发拖拽时候的元素
      });

    parentID我们被拖拽对象的父容器的ID，默认是body,这里我们为什么要放开可以让你指定父容器呢，因为有的时候的场景并不是说整个界面都需要拖拽，可能只是界面中某一小部分可以拖拽，注意一下:对应parentID的元素的定位需要是absulute或者relative
    scrollID:表示被拖拽对象的ID
    self:取值为true或者false,如果是true，这个时候我们拖拽的实际上是scrollID指定的元素,如果是false,我们实际上会额外添加一个div覆盖在scrollID上面，这样拖拽的时候就不会影响到scrollID上面的元素，这样做是有道理的，且下面看
    targetElement:上面我们说了self的作用,如果self设置为true的话 实际上拖拽scrollID对应的元素就可以实现拖拽了，但是如果scrollID上面有其他控件，这就会和拖拽事件冲突,所以我们可以在这里设置元素，表示可以接受拖拽响应事件的元素类型
    z-index:上面说到如果self设置为false的话,我们会额外添加一个div覆盖在scrollID元素上面,这个是设置额外添加那个div的层级的
　　 css:用来设置我们的self为false的时候添加的那个div的css

 

转载于:https://www.cnblogs.com/mrzhu/p/10088489.html