HTNL5拖拽事件

HTML5拖拽事件

1. 设置拖拽

图片自带拖拽功能
其他元素可设置draggable属性

<div draggable="true"></div>

const box = document.querySelector('.box');
    box.addEventListener('dragend', (e) => {
        box.style.cssText = 'top:' + (e.clientY) + 'px;left:' + (e.clientX) + 'px';
    })

1.1拖拽元素(被拖拽元素对象)事件:

1. ondragstart: 拖拽前触发,事件只触发一次
2. ondrag: 拖拽前,拖拽结束之间,连续触发
3. ondragend: 拖拽结束触发,事件只触发一次

const box = document.getElementById('box');

// dragstart 拖拽开始时触发,只触发一次
box.ondragstart = function () {
  this.style.background = 'blue';

}

// drag拖拽触发的事件,连续触发,只要鼠标不松开会一直触发
box.ondrag = function () {
  this.style.background = 'yellow';
}

// dragend 拖拽结束时,触发的事件,只要鼠标一松开就触发
box.ondragend = function () {
  this.style.background = 'skyblue';
}

1.2 目标元素(拖拽元素被拖到的对象)事件:

1. ondragenter :进入目标元素触发
2. ondragover :进入目标、离开目标之间，连续触发
3. ondragleave :离开目标元素触发
4. ondrop :在目标元素上释放鼠标触发

// dragenter 拖拽元素移入目标元素时触发,鼠标进入才算哦
wrap.ondragenter = function () {
    this.innerHTML = '释放鼠标';
}

// dragove  拖拽的元素在目标元素中触发,会连续触发
wrap.ondragover = function (e) {
    this.style.background = '#999';
    console.log(num++);
    // e.preventDefault();
    return false;
}

// dragleave  拖拽的元素离开目标元素时触发,鼠标离开才算
wrap.ondragleave = function () {
    this.innerHTML = '请将元素拖进来';
}

// drop  在目标元素中松口鼠标触发,如果要触发这个事件,必须先将drapover事件取消默认事件
wrap.ondrop = function () {
    this.style.background = 'skyblue';
    console.log('你在目标元素中松开了鼠标');
    document.body.removeChild(box);
}

2. 拖拽兼容问题

只作为了解, 因为现在火狐已经没有兼容问题

火狐浏览器下需设置dataTransfer对象才可以拖拽除图片外的其他标签

火狐在没有添加dataTransfer前不能使用ondrag和ondragend事件,其他都可以

2.1 dataTransfer对象

dataTransfer 是 拖拽事件对象的属性

1. setData() : 设置数据 key和value(必须是字符串)
2. getData() : 获取数据，根据key值，获取对应的value

box.ondragstart = function (e) {
    this.style.background = 'blue';
    e.dataTransfer.setData('key', this.id);
    // 火狐必须加上这一行代码才能触发drag和dragend事件
}

// 设置的key在这里可以使用
wrap.ondrop = function (e) {
    this.style.background = 'skyblue';
  document.body.removeChild(document.getElementById(e.dataTransfer.getData('key')))
}

3. ceffectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

box.ondragstart = function (e) {
    console.log(e.dataTransfer);
    e.dataTransfer.effectAllowed = 'link';
}

4. setDragImage ：三个参数（指定的元素，坐标X，坐标Y）

box.ondragstart = function (e) {
    console.log(e.dataTransfer);
    e.dataTransfer.setDragImage(img, 100, 100);
}

5. files： 获取外部拖拽的文件，返回一个filesList列表
   filesList下有个type属性，返回文件的类型

wrap.ondrop = function (e) {
    const dt = e.dataTransfer;
    console.log(dt.files)
    return false;
}

3. 读取读取文件信息

通过FileReader对象可以读取本地存储的文件信息, 使用File对象 指定要读取的文件数据

3.1.FileReader(读取文件信息)

HTML5 新增的内置构造函数,可以读取本地文件的信息

方法:

1. readAsDataURL 参数为要读取的文件对象
2. onload当读取文件成功完成的时候触发此事件
3. this. result 获取读取的文件数据

wrap.ondrop = function (e) {
    const dt = e.dataTransfer;
    const oFile = dt.files.item(0);

    // 创建读取文件对象
    const file = new FileReader();

    // 获取文件的url
    file.readAsDataURL(oFile)
    
	// 当信息读取完成后执行
    file.onload = function () {
        // console.log(oFile);
        if (oFile.type.includes('image')) {
            const img = new Image();
            img.src = file.result;
            wrap.appendChild(img)
        }

    }
    return false;
}

性能低,没有必要吧这些字符串渲染到页面中

3.2 利用表单域来读取文件

1. Files对象

   表单域返回的DOM元素身上有一个files的属性,这个属性值就是一个Files对象, 里面保存选中的文件的信息

<input type="file" name="file" multiple />

<script>
    var file = document.querySelector("input")

    file.addEventListener("change",function(){
        console.log(this.files)
    },false)

</script>

2. FileReader对象
   利用FileReader读取信息

file.addEventListener("change",function(){
    console.log(this.files)
    var oFile = this.files[0]
    var readfile = new FileReader()

    readfile.readAsDataURL(oFile)


    readfile.onload = function(){
        var img = new Image()
        img.src= this.result;
        box.appendChild(img)
    }
},false)

本文地址：https://blog.csdn.net/weixin_46032850/article/details/107449177