欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTNL5拖拽事件

程序员文章站 2022-03-07 11:21:42
HTML5拖拽事件1. 设置拖拽图片自带拖拽功能其他元素可设置draggable属性
const box = document.querySelector('.box'); box.addEventListener('dragend', (e) => { box.style.cssText = 'top:' + (e.clientY) + 'px;left:' + (e.clientX)...

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')))
}
  1. ceffectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
box.ondragstart = function (e) {
    console.log(e.dataTransfer);
    e.dataTransfer.effectAllowed = 'link';
}
  1. setDragImage :三个参数(指定的元素,坐标X,坐标Y)
box.ondragstart = function (e) {
    console.log(e.dataTransfer);
    e.dataTransfer.setDragImage(img, 100, 100);
}
  1. 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>
  1. 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