原生js实现拖拽与拖放事件,JavaScript实现元素拖拽、图片到指定区域进行预览的例子

时间: 2017-12-14阅读: 483标签: js知识

拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改.


drag and drop事件流程

一个完整的drag and drop流程通常包含以下几个步骤:

1.设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽.
2.监听dragstart设置拖拽数据
3.为拖拽操作设置反馈图标(可选)
4.设置允许的拖放效果,如copy,move,link
5.设置拖放目标,默认情况下浏览器阻止所有的拖放操作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖
6.监听drop事件执行所需操作


拖拽事件

以下是拖拽产生的一系列事件,拖拽事件产生时不会产生对应的鼠标事件.
1.dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.
2.dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮
3.dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
4.dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.
5.drag:拖拽期间在被拖拽元素上连续触发
6.drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.
7.dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.


DataTransfer对象

拖拽事件周期中会初始化一个DataTransfer对象,用于保存拖拽数据和交互信息.以下是它的属性和方法.
1.dropEffect: 拖拽交互类型,通常决定浏览器如何显示鼠标光标并控制拖放操作.常见的取值有copy,move,link和none
2.effectAllowed: 指定允许的交互类型,可以取值:copy,move,link,copyLink,copyMove,limkMove, all, none默认为uninitialized(允许所有操作)
3.files: 包含File对象的FileList对象.从操作系统向浏览器拖放文件时有用.
4.types: 保存DataTransfer对象中设置的所有数据类型.
5.setData(format, data): 以键值对设置数据,format通常为数据格式,如text,text/html
6.getData(format): 获取设置的对应格式数据,format与setData()中一致
7.clearData(format): 清除指定格式的数据
8.setDragImage(imgElement, x, y): 设置自定义图标

dataTransfer对象在传递给监听器的事件对象中可以访问,如下:

draggableElement.addEventListener('dragstart', function (event) {
  event.dataTransfer.setData('text', 'Hello World');
}, false);

文本

在页面中选择文本并拖拽,无需处理dragstart设置数据,浏览器自动设置选取的文本.相当于event.dataTransfer.setData("text/plain", "this is text to drag"),只需要在拖放目标上读取对应格式的数据即可.


实际案例

前面介绍了最基本的理论知识,下面进行实际操作

元素拖拽

目标: 拖拽元素到达目的区域,改变在DOM中的位置,同时设置反馈视觉效果

<div id="demo1">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <h2>拖拽下面的方块到上面任意容器中</h2>

  <!-- 设置draggable使元素成为可拖拽元素 -->
  <span id="demo1-src" draggable="true"></span>

  <style>
  #demo1 {
    margin: 20px;
  }
  #demo1 .panel-list {
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #demo1 .panel-item {
    float: left;
    margin-right: 30px;
    width: 100px;
    height: 100px;
    background: #ddd;
    border: 1px solid #ddd;
  }
  #demo1-src {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: purple;
  }
  #demo1 .over {
    border: 1px dashed #000;
    -webkit-transform: scale(0.8, 0.8);
  }
  </style>
  <script>
  (function () {

    var dnd = {
      // 初始化
      init: function () {
        var me = this;
        me.src = document.querySelector('#demo1-src');
        me.panelList = document.querySelector('.panel-list');

        // 为拖拽源监听dragstart,设置关联数据
        me.src.addEventListener('dragstart', me.onDragStart, false);

        // 拖拽鼠标移入元素,在拖放目标上设置视觉反馈
        me.panelList.addEventListener('dragenter', me.onDragEnter, false);

        // 取消元素dragover默认行为,使其可拖放
        me.panelList.addEventListener('dragover', me.onDragOver, false);

        // 拖拽移出元素,清除视觉反馈
        me.panelList.addEventListener('dragleave', me.onDragLeave, false);

        // 鼠标释放,在拖放目标上接收数据并处理
        me.panelList.addEventListener('drop', me.onDrop, false);
      },
      onDragStart: function (e) {
        e.dataTransfer.setData('text/plain', 'demo1-src');
      },
      onDragEnter: function (e) {
        if (e.target.classList.contains('panel-item')) {
          e.target.classList.add('over');
        }
      },
      onDragLeave: function (e) {
        if (e.target.classList.contains('panel-item')) {
          e.target.classList.remove('over');
        }
      },
      onDragOver: function (e) {
        e.preventDefault();
      },
      onDrop: function (e) {
        var id = e.dataTransfer.getData('text/plain');
        var src = document.getElementById(id);
        var target = e.target;
        if (target.classList.contains('panel-item')) {
          target.appendChild(src);
          target.classList.remove('over');
        }
      }

    };

    dnd.init();
  }());
  </script>
</div>

从操作系统拖拽图片到指定区域进行预览

从操作系统拖拽文件到浏览器中.不会触发dragstart,dragend,只需取消拖放区域的默认行为,设置反馈,并在拖放发生时取消浏览器默认行为,通过e.dataTransfer.files获取文件信息进行操作.

<div id="demo2">
  <h3>从文件夹中拖拽图片到下面的区域进行预览</h3>
  <ul></ul>
  <style>
  #demo2 {
    margin: 20px;
  }
  #demo2 .preview {
    height: 300px;
    background: #ddd;
  }
  #demo2 li {
    float: left;
    margin-left: 40px;
  }
  #demo2 img {
    max-height: 150px;
    width: auto;
  }
  </style>

  <script>
  (function (w) {
    var doc = w.document;

    var dnd = {
      init: function () {
        var me = this;
        var preview = doc.querySelector('#demo2 .preview');

        preview.addEventListener('dragover', function (e) {
          e.preventDefault();
        }, false);

        preview.addEventListener('drop', function (e) {
          // 操作系统拖放文件到浏览器需要取消默认行为
          e.preventDefault();

          [].forEach.call(e.dataTransfer.files, function (file) {
            if (file && file.type.match('image.*')) {
              var reader = new FileReader();

              reader.onload = function (e) {
                var img = doc.createElement('img');
                img.src = e.target.result;
                var li = doc.createElement('li');
                li.appendChild(img);
                preview.appendChild(li);
              };

              reader.readAsDataURL(file);
            }
          });
        }, false);
      }

    };

    dnd.init();
  }(window));
  </script>
</div>

js中减少使用不必要的if-else或switch_利用数组/对象代替if-else,switch

无论使用if-else,还是switch。当条件多的时候代码显得非常冗长,而且每次添加条件时需要修改主流程的代码,这样就破坏了类的开闭原则。为解决日后的维护可能存在问题,我们可以采用另一种比较优雅的实现方式来替换if-else,switch吗?

JavaScript深入之参数按值传递

ECMAscript中所有函数的参数都是按值传递,也就是,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。js始终是按值传递,在这里称他为共享传递。

为什么尽量别用setInterval

在开发一个在线聊天工具时,经常会有过多少毫秒就重复执行一次某操作的需求。“没问题”,大家都说,“用setInterval好了。”我觉得这个点子很糟糕。

avaScript与WebAssembly进行比较+在哪些情况下会优于JavaScript

这是专门探索JavaScript及其构建组件的系列,在识别和描述核心元素的过程中,我们还分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助用户实时查看和重现其Web应用程序的缺陷。

js判断是否为IE浏览器的多种方法总汇

这篇文章主要整理通过js来判断浏览器是否为IE的多种方法。使用js脚本判断浏览器是否为ie,这里分享六种判断是否为ie的方法,有需要的朋友参考学习下。

js中return关键词的作用_return的用法详解

return从字面意思来看就是返回,官方定义return语句将终止当前函数并可以返回当前函数的值; 也就是说return后面可以跟一个value,也就是说可以跟javascript中的任何数据类型

js记录用户行为浏览记录和停留时间

原来是想使用 cookie 来记录,但是考虑到 cookie 所能记录的数据最大为 4k ,可能不够用。于是使用了 HTML5 的 localStorage (最大数据 5M )来存储( IE8 以上浏览器支持)。这里使用到了 jquery.cookie 的插件,所以页面要引入 jquery 和 jquery.cookie 。

Web Worker 详细介绍_Web Workers的使用

web worker 是运行在后台的 JavaScript,独立于其他脚本,也就是说在Javascript单线程执行的基础上,开启一个子线程,进行程序处理,而不影响主线程的执行。Service Worker 是一个由事件驱动的 worker,它由源和路径组成,以加载 .js 文件的方式实现的。

数字在JavaScript中是如何编译的

JavaScript中的所有数字都是浮点数。这篇博客文章解释了这些浮点数如何在64位二进制内部表示。浮点数并不一定等于小数,定点数也并不一定就是整数。所谓浮点数就是小数点在逻辑上是不固定的,而定点数只能表示小数点固定的数值

window.location.href的用法(动态输出跳转)

javascript中的location.href有很多种用法,window.location.href 语句可以实现一个框架的页面在执行服务器端代码后刷新另一个框架的页面