JS实现简易的图片拖拽排序实例代码


Posted in Javascript onJune 09, 2017

由HTML5的拖放API,实现的简易图片拖放效果。

一、HTML5拖放API的知识点

首先我们得知道元素怎么才可以被拖放,需要设置它们的draggable属性,其中img和a标签的dragable属性默认是true,不需要我们手动设置。

拖放API的监听事件如下:

  1. dragstart: 源对象拖拽开始;
  2. drag: 源对象拖拽的过程中;
  3. dragend: 源对象拖拽结束;
  4. dragenter: 进入过程对象区域;
  5. dragover: 在过程对象区域内移动;
  6. dragleave: 离开过程对象区域;
  7. drop: 源对象拖放到目标区域。

对于这几个事件,我们要结合需求利用preventDefault()取消它的默认行为。

在拖放事件中,提供dataTransfer用于在源对象与目标对象之间传递数据,dataTransfer一般通过e.dataTransfer调用,dataTransfer的方法如下:

  1. setData(format, data)
  2. getData(format);
  3. clearData()。

以上是一些基础知识,与其听我BB,不如去打开MDN,再敲几行代码岂不是美滋滋。

二、简易的图片拖拽排序。

先放效果图吧:

JS实现简易的图片拖拽排序实例代码

首先看看我们的dom结构

<!-- 部分标签 -->
  div#drag-wrap
    div(class="item" id="wrap1")
      img(id="img1")
    ...
    ...

我们需要监听的事件:

const dragCon = document.getElementById('drag-wrap');

  dragCon.addEventListener('dragstart', startDrag, false);

  /**
  * 这里一定要阻止dragover的默认行为,不然触发不了drop
  */
  dragCon.addEventListener('dragover', function (e) {
    e.preventDefault();
  }, false);
  dragCon.addEventListener('drop', exchangeElement, false);

在dragstart事件中,我们需要记住需要交换的子元素和父元素:

function startDrag(e) {
    e.dataTransfer.setData('Text', e.target.id + ';' + e.target.parentElement.id);
  }

最重要的就是在drop事件中处理我们交换元素的逻辑和一些边缘条件的判断。

function exchangeElement(e) {
    e.preventDefault();
    const el = e.target;
    let PE, //要插入位置的父元素
      CE; //需要交换的元素
    if (el.tagName.toLowerCase() !== 'div') {           PE = el.parentElement;
      CE = el;
    } else {
      PE = el;
      CE = el.querySelector('img');
    }

    /**
     * 判断不在控制范围内
     */
    if (!PE.classList.contains('item')) {
      return;
    }
    const data = e.dataTransfer.getData('Text').split(';');
    //交换元素
    document.getElementById(data[1]).appendChild(CE);
    PE.appendChild(document.getElementById(data[0]));
  }

其实如果你充分利用几个阶段的事件,做出的效果会更精致。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用正则替换变量
May 05 Javascript
简单的js表格操作
Sep 24 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
vue中实现滚动加载更多的示例
Nov 08 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
jQuery为某个div加入行样式
Jun 09 #jQuery
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 #Javascript
node.js中cluster的使用教程
Jun 09 #Javascript
vue bootstrap小例子一枚
Jun 09 #Javascript
详解webpack解惑:require的五种用法
Jun 09 #Javascript
Bootstrap输入框组件使用详解
Jun 09 #Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 #jQuery
You might like
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
javascript判断非数字的简单例子
2013/07/18 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
Python类的动态修改的实例方法
2017/03/24 Python
Python错误处理操作示例
2018/07/18 Python
python实现大文件分割与合并
2019/07/22 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
实习生的自我评价
2014/01/08 职场文书
会议开场欢迎词
2014/01/15 职场文书
大学生就业意向书范文
2014/04/01 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
重阳节活动总结
2014/08/27 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
小学班级标语口号大全
2015/12/26 职场文书
Redis Lua脚本实现ip限流示例
2022/07/15 Redis