JS的平凡之路--简易的图片拖拽排序

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

一、HTML5拖放API的知识点

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

拖放API的监听事件如下:

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

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

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

setData(format, data)
getData(format)；
clearData()。

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

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

先放效果图吧：

首先看看我们的dom结构

    <!-- 部分标签 -->div#drag-wrapdiv(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]));}

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

如果本文对您有帮助，欢迎关注微信公众号，为您推送更多大前端相关的内容，欢迎留言讨论，ε=ε=ε=┏(゜ロ゜;)┛。

您还可以在这些地方找到我：

一个前端开发者的LeetCode刷题之旅
掘金

JS的平凡之路--简易的图片拖拽排序相关推荐

antd vue3 图片上传组件扩展，支持多图上传图片拖拽排序等
组件涉及到 vue3.2.vite.Ant Design Vue 3.2.16.Windi CSS样式库.vuedraggable-es拖拽库等组件功能图片拖拽多图上传自定义图片加载样式自定 ...
Android 个人相册图片拖拽排序
效果图如下: 代码1:具体核心代码: private ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper.Callback ...
手机端适用：图片拖拽排序v-dragging
为了不想用jquery,终于找到能兼容vue的插件,很好使 1.安装 npm install awe-dnd --save 2.main.js引入 import VueDND from 'awe-dn ...
html设置图片不可拖拽,js css3实现图片拖拽效果
本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 body{ text-align: center; } .container{ display: flex; just ...
html js点击字图片下拉,JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: JavaScript实现文字与图片的拖拽效果 *{padding:0;margin:0;} . ...
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
android可拖拽九宫格,微信小程序实现九宫格图片拖拽
(在真机上的效果就不演示了,是差不多的) 实现思路布局在这里运用到了微信小程序的moveable-area和moveable-view两个标签. moveable-area是可拖拽的区域,需要设置 ...
html 禁止选择与复制出现蓝色选中状态，禁止图片拖拽，隐藏鼠标,全屏状态下有效
一.禁止选择与复制 js实现 ['contextmenu', 'selectstart', 'copy'].forEach(function(ev){document.addEventListener ...
html 禁止选择与复制，禁止图片拖拽
一.禁止选择与复制. js实现: ['contextmenu', 'selectstart', 'copy'].forEach(function(ev){document.addEventListen ...

JS的平凡之路--简易的图片拖拽排序

一、HTML5拖放API的知识点

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

JS的平凡之路--简易的图片拖拽排序相关推荐

最新文章

热门文章