Html5--拖拽事件

最新推荐文章于 2024-02-22 16:53:56 发布

_聪明勇敢有力气

最新推荐文章于 2024-02-22 16:53:56 发布

阅读量380

点赞数 2

分类专栏： html5 文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/weixin_65402230/article/details/127622974

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

拖拽事件

设置draggable = true 就可拖拽

    <div class="dropzone">
      <div draggable="true" id="box">这是一个可拖动的div</div>
    </div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>

dragstart

拖拽开始

      var dragged;

      document.addEventListener(
        'dragstart',
        function (e) {
          //保存拖动元素的引用
          dragged = e.target;
          //设置数据缓存
          e.dataTransfer.setData('text', dragged.id);
        },
        false
      );

dragenter

拖拽进入

      document.addEventListener(
        'dragenter',
        function (e) {
          if (e.target.className == 'dropzone') {
            e.target.style.backgroundColor = 'purple';
          }
        },
        false
      );

dragleave

拖拽离开

      document.addEventListener('dragleave', function (e) {
        if (e.target.className == 'dropzone') {
          e.target.style.backgroundColor = '';
        }
      });

dragover

拖拽结束

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

drop

拖拽放入

      document.addEventListener(
        'drop',
        function (e) {
          var data = e.dataTransfer.getData('text');
          e.preventDefault();
          console.log(data);
          console.log(e.dataTransfer.files);
					//清除缓存数据
          e.dataTransfer.clearData();
					//查看缓存数据类型
          console.log(e.dataTransfer.types);
          if (e.target.className == 'dropzone') {
            e.target.style.backgroundColor = '';
            dragged.parentNode.removeChild(dragged);
            e.target.appendChild(dragged);
          }
        },
        false
      );

总体样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        height: 100px;
        width: 100px;
        background-color: orange;
        margin-bottom: 10px;
        text-align: center;
        color: #fff;
      }
      .dropzone {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="dropzone">
      <div draggable="true" id="box">这是一个可拖动的div</div>
    </div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>

    <script>
      var dragged;

      document.addEventListener(
        'dragstart',
        function (e) {
          //保存拖动元素的引用
          dragged = e.target;
          //设置数据缓存
          e.dataTransfer.setData('text', dragged.id);
        },
        false
      );

      document.addEventListener(
        'dragenter',
        function (e) {
          if (e.target.className == 'dropzone') {
            e.target.style.backgroundColor = 'purple';
          }
        },
        false
      );
      document.addEventListener('dragleave', function (e) {
        if (e.target.className == 'dropzone') {
          e.target.style.backgroundColor = '';
        }
      });
      document.addEventListener(
        'dragover',
        function (e) {
          e.preventDefault();
        },
        false
      );

      document.addEventListener(
        'drop',
        function (e) {
          var data = e.dataTransfer.getData('text');
          e.preventDefault();
          console.log(data);
          console.log(e.dataTransfer.files);
					//清除缓存数据
          e.dataTransfer.clearData();
					//查看缓存数据类型
          console.log(e.dataTransfer.types);
          if (e.target.className == 'dropzone') {
            e.target.style.backgroundColor = '';
            dragged.parentNode.removeChild(dragged);
            e.target.appendChild(dragged);
          }
        },
        false
      );
    </script>
  </body>
</html>