小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
[代码]HTML5拖拽
  • 首页 > 前端
  • 作者:小昱
  • 2017年8月7日 15:38 星期一
  • 浏览:93
  • 字号:
  • 评论:0
  • HTML

    <div id="demo1">
      <ul class="panel-list">
        <li class="panel-item"></li>
        <li class="panel-item"></li>
        <li class="panel-item"></li>
        <li class="panel-item"></li>
        <li class="panel-item"></li>
      </ul>
      <h2>拖拽下面的方块到上面任意容器中</h2>
      <!-- 设置draggable使元素成为可拖拽元素 -->
      <span class="movable" id="demo1-src" draggable="true"></span>
    </div>

    CSS

    #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);
    }

    JavaScript

    方法一: 对象字面量

    (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) {
        console.log(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();
    }());
    

    方法二: class - DOM0

    class DND {
      constructor({src = '', panelList = '', panelItem = ''}) {
        this.src = src
        this.srcEle = document.querySelector(src)
        this.panelList = document.querySelector(panelList)
        this.panelItem = panelItem
        this.doDrag()
      }
      doDrag () {
        this.srcEle.ondragstart = (e) => {
          e.dataTransfer.setData('text/plain', this.src);
        }
        this.panelList.ondragenter = (e) => {
          if (e.target.classList.contains(this.panelItem)) {
            e.target.classList.add('over');
          }
        }
        this.panelList.ondragover = (e) => {
          e.preventDefault();
        }
        this.panelList.ondragleave = (e) => {
          if (e.target.classList.contains(this.panelItem)) {
            e.target.classList.remove('over');
          }
        }
        this.panelList.ondrop = (e) => {
          var id = e.dataTransfer.getData('text/plain');
          var src = document.querySelector(id);
          var target = e.target;
          if (target.classList.contains(this.panelItem)) {
            target.appendChild(src);
            target.classList.remove('over');
          }
        }
      }
    }
    (function(){
      let dnd = new DND({
        src: '#demo1-src',
        panelList: '.panel-list',
        panelItem: 'panel-item'
      })
    })()

    方法三: class - DOM2

     
    class DND {
      constructor({src = '', panelList = '', panelItem = ''}) {
        this.src = src
        this.srcEle = document.querySelector(src)
        this.panelList = document.querySelector(panelList)
        this.panelItem = panelItem
        this.doDrag()
      }
      doDrag () {
        // 为拖拽源监听dragstart,设置关联数据
        this.srcEle.addEventListener('dragstart', (e) => {
          e.dataTransfer.setData('text/plain', this.src);
        }, false);
        // 拖拽鼠标移入元素,在拖放目标上设置视觉反馈
        this.panelList.addEventListener('dragenter', (e) => {
          if (e.target.classList.contains(this.panelItem)) {
            e.target.classList.add('over');
          }
        }, false);
        // 取消元素dragover默认行为,使其可拖放
        this.panelList.addEventListener('dragover', (e) => {
          e.preventDefault();
        }, false);
        // 拖拽移出元素,清除视觉反馈
        this.panelList.addEventListener('dragleave', (e) => {
          if (e.target.classList.contains(this.panelItem)) {
            e.target.classList.remove('over');
          }
        }, false);
        // 鼠标释放,在拖放目标上接收数据并处理
        this.panelList.addEventListener('drop', (e) => {
          var ele = e.dataTransfer.getData('text/plain');
          var src = document.querySelector(ele);
          var target = e.target;
          if (target.classList.contains(this.panelItem)) {
            target.appendChild(src);
            target.classList.remove('over');
          }
        }, false);
      }
    }
    (function(){
      let dnd = new DND({
        src: '#demo1-src',
        panelList: '.panel-list',
        panelItem: 'panel-item'
      })
    })()

     

      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: [代码]HTML5拖拽
    本文地址:http://www.xiaoyulive.top/?post=115
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号