JavaScript实现拖放效果

JavaScript 专栏收录该内容
4 篇文章 0 订阅

相关重点

DataTransfer 对象:

  • 退拽对象用来传递的媒介,使用一般为Event.dataTransfer。

draggable 属性:

  • 就是标签元素要设置draggable=true,否则不会有效果,例如:
<div title="拖拽我" draggable="true">列表1</div>

Event.preventDefault() 方法:

  • 阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从
  • 其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。
  • 此时需要用用document的ondragover事件把它直接干掉。Event.effectAllowed 属性:就是拖拽的效果
事件产生事件的元素描述
dragstart被拖放的元素开始拖放操作
drag被拖放的元素拖放过程中
dragenter拖放过程中鼠标经过的元素被拖放元素开始进入本元素的范围内
dragover拖放过程中鼠标经过的元素被拖放元素正在本元素范围内移动
dragleave拖放过程中鼠标经过的元素被拖放元素离开本元素的范围
drop拖放的目标元素有其他元素被拖放到本元素中
dragend拖放的对象元素这里写代码片拖放操作结束
属性描述
dropEffect表示拖放操作的视觉效果,允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果范围内,允许指定的值有:none、copy、link、move。
effectAllowed用来指定当元素被拖放时所允许的视觉效果。可以指定的值有:none、copy、copyLink、copyMove、link、linkMove、all、uninitialize。
files返回表示被拖拽文件的 FileList。
types存入数据的MIME类型。如果任意文件被拖拽,那么其中一个类型将会是字符串”Files”。

实例讲解

创建一个html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box{width: 400px;height: 400px;background-color: grey;}
            img{width: 200px;}
        </style>
        <script src="js/ja.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id='box1' class="box"></div>
        <img src="img/8.jpg"/>
        <div class="inter"></div>
    </body>
</html>

第一步的js文件

var $box,$in;
window.onload=function(){
    //ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
     $box = document.getElementsByClassName('box')[0];
     $in =document.getElementsByClassName('inter')[0];
    $box.ondragenter=function(e){
        //监听事件,返回信息
        showOb(e);
    }
}
function showOb(obj){
    //打印事件信息
    var s ='';
    for(var k in obj){
        s += k+':'+obj[k]+'<br/>'
    }
    $in.innerHTML= s;
}

观看效果

这里写图片描述

1.2.2 dragover事件,用来确定给用户显示怎样的反馈信息。

如果这个事件被取消,反馈信息(通常就是光标)就会基于 dropEffect 属性的值更新。

第二步修改代码

var $box,$in;
window.onload=function(){
    //ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
     $box = document.getElementsByClassName('box')[0];
     $in =document.getElementsByClassName('inter')[0];
//  $box.ondragenter=function(e){
//      //监听事件,返回信息
//      showOb(e);
//  }
    $box.ondragover = function(e){
        e.preventDefault()
        //阻止系统默认事件

    }
    $box.ondrop = function(e){


        showOb(e.dataTransfer);
    }
}
function showOb(obj){
    //打印事件信息
    var s ='';
    for(var k in obj){
        s += k+':'+obj[k]+'<br/>'
    }
    $in.innerHTML= s;
}

所求这里写图片描述

最终额js代码做成可以在两个div之间拖动的效果

总代码如下

var $box1,$in,$img1,$box2;
window.onload=function(){
    //ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
     $box1 = document.getElementsByClassName('box1')[0];
      $box2 = document.getElementsByClassName('box2')[0];
     $in =document.getElementsByClassName('inter')[0];
     $img1 =document.getElementById('img1')
//  $box.ondragenter=function(e){
//      //监听事件,返回信息
//      showOb(e);
//  }
    $box1.ondragover = function(e){
        e.preventDefault()
        //阻止系统默认事件
    }
    $box2.ondragover = function(e){
        e.preventDefault()
        //阻止系统默认事件
    }
    $img1.ondragstart=function(e){
        e.dataTransfer.setData('imgid','img1');
    }
    $box1.ondrop = function(e){
//      showOb(e.dataTransfer);
        e.preventDefault();
        //创建节点
        var img = document.getElementById(e.dataTransfer.getData('imgid'))
//      $box1.appendChild(img)
        //上面是在一个区域拖动,为了实现多个区域拖动我们进行如下修改
        e.target.appendChild(img)

    }
    $box2.ondrop = function(e){
        e.preventDefault();
        //创建节点
        var img = document.getElementById(e.dataTransfer.getData('imgid'))
//      $box2.appendChild(img)
        //上面是在一个区域拖动,为了实现多个区域拖动我们进行如下修改
        e.target.appendChild(img)

    }
}
function showOb(obj){
    //打印事件信息
    var s ='';
    for(var k in obj){
        s += k+':'+obj[k]+'<br/>'
    }
    $in.innerHTML= s;
}
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

大帝依然在

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值