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 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
写出高质量的PHP程序
2012/02/04 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
继续学习javascript闭包
2015/12/03 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Python中运行并行任务技巧
2015/02/26 Python
python回调函数用法实例分析
2015/05/09 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
Pandas分组与排序的实现
2019/07/23 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
高职教师先进事迹材料
2014/08/24 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
CSS3实现指纹特效代码
2022/03/17 HTML / CSS