H5元素的拖拽实现

元素的拖拽

元素的拖拽事件

• ondragstart //开始拖拽事件
• ondragend //拖拽结束
• ondrag //拖拽进行中连续触发

目标事件：

• ondragenter 拖拽元素进入目标元素
• ondragleave 拖拽元素离开目标元素
• ondrageover 拖拽元素悬停在目标元素之上连续触发
• ondrop 推拽元素在目标元素上释放

dataTransfer.effectAllowed 设置鼠标样式。可选择的样式：

• none
• copy
• copyLink
• copyMove
  -link
• linkMove
• move
• all
• uninitialized

ondrop 事件想要触发，必须在 ondragover 事件中阻止默认事件

<div id="drag" draggable="true"></div>
<div id="target"><div/>
<div id="image" style="width:50px; height:50px; background:pink;">IMG</div>

let drag = document.getElementById('drag');
let target = document.getElementById('target')
let image = document.getElementById('image')
//拖拽开始时触发
drag.ondragestart = function(even){
    let ev = even || window.event
    this.style.background = `red`
    //拖拽鼠标样式
    ev.dataTransfer.effectAllowed = `copyLink`
    //拖拽镜像
    ev.dataTransfer.setDragImage(image,0,0)
}
//拖拽进行中连续触发
drag.ondrag = function(){
    console.log(`123`)
}
//拖拽结束时触发
drag.ondragend = function(){
    this.style.background = `green`
}

//拖拽元素进入时触发
target.ondagenter = function(){
    this.style.background = `gray`
}
//拖拽元素离开目标元素触发
target.ondragleave = function(){
    this.style.background =`blue`
}
//拖拽元素悬停在目标元素之上连续触发
target.ondragover =function(even){
    let ev = even || window.event
    //阻止默认事件，否则 ondrop 事件不能触发。
    ev.preventDefault()
}
// 拖拽元素在在目标元素上释放时触发。必须在 ondragover 中阻止默认事件
target.ondrop = function(){
    
}

dataTransfer.setDragImage(img,x,y) 拖拽时跟随鼠标的镜像样式。三个参数，参数1：用于拖动反馈镜像的图像元素，参数2：镜像跟随鼠标的水平偏移，参数3：镜像跟随鼠标的垂直偏移。

火狐中要传递一个对象才能实现

dataTransfer 数据传递对象。通过 setData() 和 getData() 让拖拽元素与目标元素进行数据的交互

var drag = document.getElementById('drag');
var target = document.getElementById('target');

drag.ondragstart = function(ev){
    var ev = ev || window.ev;
    //传递数据给目标元素
    ev.dataTransfer.setData('k1','一个测试数据');
    this.style.background = 'red';
}

target.ondragover = function(ev){
    var ev = ev || window.event;
    //阻止默认事件，否则 ondrop 事件不能触发。
    ev.preventDefault(); 
}

target.ondrop = function(ev){
    var ev = ev || window.event;
    //获取拖拽元素数据
    alert(ev.dataTransfer.getData('k1'));
}

拖拽外部文件

• event.dataTransfer.files 拖拽的文件列表。
• event.dataTransfer.files.lenght 拖拽的文件列表长度。
• event.dataTransfer.files[0].type 拖拽的文件类型。

<div id="target">目标元素</div>

// 拖拽元素在在目标元素上释放时触发。必须在 ondragover 中阻止默认事件。
target.ondrop = function(ev){
    ev = ev || window.event

    //阻止默认事件，否则 ondrop 事件不能触发。
    ev.preventDefault(); 
            
    let fs = ev.dataTransfer.files  //拖拽的文件列表集合
    let ul = document.getElementById(`ul`) 
    console.log(ul);
            
    //递归写法
    function tp(fs,index){
        if(index == fs.length){
            return -1
        }
        //文件流对象
        let fd = new FileReader()  
        // 读取拖拽的文件中读取数据。
        fd.readAsDataURL(fs[index])  
        console.log(fd)
        fd.onload = function(){
        console.log(fd.result);
        // 读取到的数据赋值给图片对象,result中是base64码的图片地址
        ul.innerHTML += `
            <li><img src="${fd.result}" alt="1"></li>
            `
            tp(fs,++index)  //调用自己递归
        }
    }
    tp(fs,0)

    //循环写法(会有拖多个文件只能传入一个的问题)
    for(let i=0;i<fs.length;i++){
        //文件流对象
        let fd = new FileReader()
        // 读取拖拽的文件中读取数据
        fd.readAsDataURL(fs[i])
        console.log(fd)
        
        fd.onload = function(){
            console.log(fd.result)
            // 读取到的数据赋值给图片对象,result中是base64码的图片地址
            ul.innerHTML += `<li><img src="${fd.result}" alt="1"></li>`
            }
        }
    }