HTML5拖拽效果

最新推荐文章于 2022-04-24 00:11:03 发布

王shao

最新推荐文章于 2022-04-24 00:11:03 发布

阅读量124

点赞数

分类专栏：前端文章标签：拖拽 js html5

本文链接：https://blog.csdn.net/qq_41028725/article/details/100110564

版权

前端专栏收录该内容

30 篇文章 1 订阅

订阅专栏

认真看例子，你会看得懂：

<body>
    <ul>
        <li draggable="true">我</li>
        <li draggable="true">爱</li>
        <li draggable="true">你</li>
    </ul>

<div id='div'><div>
<script>
    /*
        拖拽元素事件：事件对象为被拖拽元素
            dragstart:拖拽前触发
            drag:拖拽前、拖拽结束之间连续触发
            dragend:拖拽结束触发
        目标元素事件：事件对象为目标元素
            dragenter:进入目标元素触发，相当于mouseover
            dragover:进入目标、离开目标之间连续触发
            dragleave:离开目标元素触发，相当于mouseout
            drop:在目标元素上释放鼠标触发
    */
    var ali = document.getElementsByTagName('li');
    var adiv = document.getElementById('div');
    for(let i=0;i<ali.length;i++){
        ali[i].ondragstart = function (ev) {
            this.style.background = 'yellow';
            
            // dataTransfer对象可以用来保存被拖动的数据,参数必须都是字符串
            ev.dataTransfer.setData('content',this.innerText);

            // 拖拽进入目标元素时修改鼠标样式(值可以为：none,copy,copyLink,copyMove,link,linkMove,move,all,uninitialized)
            ev.dataTransfer.effectAllowed = 'copyLink';

            // 设置拖拽时的鼠标旁边显示的元素，三个参数：元素，横坐标x，纵坐标y
            ev.dataTransfer.setDragImage(this,0,0);
        }
        ali[i].ondrag = function () {
            console.log('拖拽中');
        }
        ali[i].ondragend = function () { 
            this.style.background = 'rgb(206, 204, 204)';
        }
    }
    adiv.ondragenter = function(){
        this.style.background = 'blue';
    }
    adiv.ondragover = function(event){
        console.log('进入了');
        // 要想触发drop事件，就必须在dragover事件中阻止默认事件
        event.preventDefault();
    }
    adiv.ondragleave = function(){
        this.style.background = 'red';
    }
    adiv.ondrop = function(event){
        // 阻止默认事件：以免让从外部被拖拽的元素执行浏览器的默认行为
        event.preventDefault();
        console.log('释放了',event.dataTransfer.getData('content'));
        adiv.innerText += event.dataTransfer.getData('content');

        // 读取从外部拖拽进来的文件信息
        console.log(event.dataTransfer.files);

        // 读取拖拽进来的文件
        var fd = new FileReader();
        fd.readAsDataURL(event.dataTransfer.files[0]);
        fd.onload=()=>{
            console.log('文件内容：',fd.result);
            var oimg = document.createElement('img');
            oimg.style.width = '50px';
            oimg.src = fd.result;
            adiv.appendChild(oimg);
        }
    }
</script>

王shao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5拖拽效果

认真看例子，你会看得懂：<body> <ul> <li draggable="true">我</li> <li draggable="true">爱</li> <li draggable="true">你</li> </ul>...
复制链接

扫一扫