拖拽简单实现

支持

pc、移动、触摸屏
js文件下载

转载自简单图片拖拽-js插件，支持 pc、移动、触摸屏

1、使用

<!-- 普通引入 -->
<script src="./simpleImgDraggable.js"></script>

// vue引入
import simpleImgDraggable from '../assets/js/simpleImgDraggable'

    // ele 拖拽对象 类名、ID、元素对象（NodeList）
    new simpleImgDraggable(ele, {
         /**
         * 触摸屏有效，是否复制一份拖拽元素，并且拖拽时复制元素
         * 有些布局，有overflow: hidden，需要拖动跟随鼠标，所有需要复制一份并且顶置，不复制的话，拖不出去
         * 简写 copyOverhead:true,
         */
        copyOverhead: {
            isCopy: false,//是否复制
            copyCalss: '',//复制一份的 类名，用于有些需要修改样式
            overheadPost: 'body',//定位在那个位置，类名
        },
        canDragInCon: [],//可拖入容器，类名或者 id，合集
        //开始拖动事件，对应触摸拖拽中的
        ondragstart: (index, e) => {},
        //拖拽中，对应触摸拖拽中的
        ondrag: (index, e) => { },
        //拖动结束事件，对应触摸拖拽中的
        ondragend: (index, e, dargInBoxIndex, dargInBox) => {},
        //拖入容器触发一次事件
        ondragenter: (dargInBoxIndex, dargInBox) => {},
        //拖离容器触发一次事件
        ondragleave: (dargInBoxIndex, dargInBox) => {},
        //在容器中拖动触发事件
        ondragover: (dargInBoxIndex, dargInBox) => { },
        // 拖动进入容器成功返回事件
        success: (index, e, dargInBoxIndex, dargInBox) => {}
    });

3、参数说明

3、事件返回 参数说明

4、销毁，移除绑定事件，清空内部变量

    let a = new simpleImgDraggable(****);
    a.destroy();