react.js组件实现拖拽复制和可排序的示例代码

在实现复制前，对之前的拖拽排序组件属性进行了修改。

  • 摒弃了value中的content属性，拖拽组件暴露的render函数，利用这个属性进行组件内部子组件的渲染，这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计。
  • 为了实现Data和model的脱藕，和sortKey一样，组件增加codeKey属性。

拖拽复制的效果如下：

由于实现组件的核心是根据value数据来渲染页面，因此实现拖拽复制功能，只需要在“拖拽释放”的时候，将被拖拽方的数据放到当前目标所在的value数组中即可。

具体实现代码如下：

// 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时
 drop(dropedSort, data, sortKey, dropedUid, codeKey, ee) {
  ee.preventDefault();
  const code = ee.dataTransfer.getData("code");
  const uId = ee.dataTransfer.getData("uId");
  const dragedItem = ee.dataTransfer.getData("item");
  const sort = ee.dataTransfer.getData("sort");
  if (uId === dropedUid) {
   if (sort < dropedSort) {
    data.map(item => {
     if (item[codeKey] === code) {
      item[sortKey] = dropedSort;
     } else if (item[sortKey] > sort && item[sortKey] < dropedSort + 1) {
      item[sortKey]--;
     }
     return item;
    });
   } else {
    data.map(item => {
     if (item[codeKey] === code) {
      item[sortKey] = dropedSort;
     } else if (item[sortKey] > dropedSort - 1 && item[sortKey] < sort) {
      item[sortKey]++;
     }
     return item;
    });
   }
  } else if (this.props.isAcceptAdd) {
   let objDragedItem = JSON.parse(dragedItem);
   if (data.filter(item => item[codeKey] === objDragedItem[codeKey]).length === 0) {
    const maxSort = Math.max.apply(Math, data.map(citem => citem[sortKey]));
    data.map(item => {
     if (dropedSort === maxSort) {
      objDragedItem[sortKey] = dropedSort + 1;
     } else {
      if (item.sort > dropedSort) {
       objDragedItem[sortKey] = dropedSort + 1;
       item[sortKey]++
      }
     }
     return item
    });
    data.push(objDragedItem)
   }
  }
  this.props.onChange(data)
  if (ee.target.className.indexOf('droppingContent') !== -1) {
   ee.target.className = styles.droppedcontent;
  }
 }

这里要注意的有两点：

第一点是，我通过this.props.isAcceptAdd这个属性来判断当前组件是否允许接受拖拽复制的元素。

第二点是，我有一个放在内存中的“uId”，这个“uId”在每个拖拽组件初始化的时候生成。这样我就可以通过它来判断，当前被拖拽到目标区域的元素，是组件本身的内部元素还是外部元素，如果是内部就执行排序功能，外部则执行复制的逻辑代码。

组件API：

GitHub地址：https://github.com/VicEcho/VDraggable

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS插件clipboard.js实现一键复制粘贴功能

    JS插件clipboard.js实现一键复制粘贴功能

    一键复制粘贴功能需要用到一个轻量级的JS插件:clipboard.js. 官网地址 下载到本地后,将其放入项目中,直接引用即可.具体实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一键复制粘贴</title> <style> .transfer { width: 90%; margin: 20px auto; fon

  • JavaScript实现复制内容到粘贴板代码

    最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag

  • clipboard.js在移动端复制失败的解决方法

    clipboard.js在移动端复制失败的解决方法

    1.前沿 一句话介绍下clipboard.js:实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能. 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是ok的.简直一脸懵逼... 遇到这个bug,我第一个思考到的是,这是个常用的插件,网上应该有现成的解决方法.网友分享的方法是:把绑定data-clipboard-target

  • jQuery实现简单复制json对象和json对象集合操作示例

    jQuery实现简单复制json对象和json对象集合操作示例

    本文实例讲述了jQuery实现简单复制json对象和json对象集合操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>www.jb51.net jQuery复制json</title> <script src="

  • JavaScript复制内容到剪贴板的两种常用方法

    常见方法 查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js 原生方法:document.execCommand() 分别来看看这两种方法是如何使用的. clipboard.js 这是clipboard的官网:https://clipboardjs.com/,看起来就是这么的简单. 引用 直接引用: <script src="dist/clipboard.min.js"></script> 包: npm install

  • 基于js实现复制内容到操作系统粘贴板过程解析

    一.如果只考虑IE浏览器,可以直接用原声js实现(兼容IE.谷歌.火狐等浏览器) if(window.clipboardData){ //清空操作系统粘贴板 window.clipboardData.clearData(); //将需要复制的内容复制到操作系统粘贴板 window.clipboardData.setData("Text", "要复制的内容"); } 二.如果是其他浏览器,上面的办法行不通,其他浏览器出于安全的考虑禁止js访问操作系统粘贴板. 这里需要

  • js实现点击按钮复制文本功能

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板 但是 select() 方法只对 <input>

  • JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】

    本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属

  • react.js组件实现拖拽复制和可排序的示例代码

    在实现复制前,对之前的拖拽排序组件属性进行了修改. 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计. 为了实现Data和model的脱藕,和sortKey一样,组件增加codeKey属性. 拖拽复制的效果如下: 由于实现组件的核心是根据value数据来渲染页面,因此实现拖拽复制功能,只需要在"拖拽释放"的时候,将被拖拽方的数据放到当前目标所在的value数组中

  • React.js组件实现拖拽排序组件功能过程解析

    因为使用了react.js技术栈,所以封装优先考虑输入和输出.基于数据驱动去渲染页面.控制拖拽元素的顺序. 由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop).当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单. 实现的效果如下: 第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接 有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法.例如原生的click事件,在react.js里应使

  • android ItemTouchHelper实现可拖拽和侧滑的列表的示例代码

    android ItemTouchHelper实现可拖拽和侧滑的列表的示例代码

    前言 话不多说,直接上图: 笔者使用 RecyclerView 的 ItemTouchHelper 来实现这个效果,过程非常简单.为了学习,这里顺便实现了一下侧滑删除. 实现功能: 按住 item 左侧的按钮可以上下拖动 item 向右侧滑删除 item item 拖动或侧滑时有阴影效果 实现基本功能 循序渐进学习,这里我们先实现基本的功能: 长按 item 实现上下拖拽 向右侧滑删除 布局文件 很简单,不多说,直接上代码: activity_main.xml <?xml version="

  • vue项目中实现el-dialog组件可拖拽效果

    vue项目中实现el-dialog组件可拖拽效果

    目录 0. 首先上图,看效果 1. 实现方法 参考资料 0. 首先上图,看效果 1. 实现方法 第一步:创建 drag.js文件 实现拖拽源码 /**  * 拖拽移动  * @param  {elementObjct} bar 鼠标点击控制拖拽的元素  * @param {elementObjct}  target 移动的元素  * @param {function}  callback 移动后的回调  */ export function startDrag(bar, target, call

  • react实现简单的拖拽功能

    react实现简单的拖拽功能

    本文实例为大家分享了react实现简单的拖拽功能的具体代码,供大家参考,具体内容如下 src文件夹下新建文件夹demo  然后在创建两个文件js和css demo.js文件代码 // react实现拖拽 import React from 'react' // 引入css样式 import './demo.css' class Drag extends React.Component {     constructor(props) {         super(props);        

  • vue+element-ui+sortable.js实现表格拖拽功能

    vue+element-ui+sortable.js实现表格拖拽功能

    本文实例为大家分享了vue+element-ui+sortable.js实现表格拖拽的具体代码,供大家参考,具体内容如下 效果如下: 1.vue使用cli创建项目就不说了,本人使用的是cli3.x版本 2.下载element-ui npm i element-ui -S 3.引入element-ui,找到main.js,加入如下代码 // 导入element-ui,和全局使用element-ui样式 import ElementUI from "element-ui"; import

  • vue draggable组件实现拖拽及点击无效问题的解决

    vue draggable组件实现拖拽及点击无效问题的解决

    目录 一.效果图 二.拖拽及点击无效解决方法 三.vuedraggable的使用 在实现一个移动端项目的时候,根据产品需求,要实现一个既能增加删除又可以拖拽调换位置的效果,然后我使用了draggable组件,然后发现放到手机上的时候苹果(ios)手机可以正常使用,但是鸿蒙系统的手机(例如华为pro40)有些是不可以正常拖拽.增加和删除,只能一开始正常操作两三个,然后后面就怎么点都没有什么反应.通过多次尝试和查找方法,最终找到了解决办法,我在这里总结一下. 一.效果图 二.拖拽及点击无效解决方法

  • react 实现表格列表拖拽排序的示例

    目录 问题描述 思路 解析 1. react-sortable-hoc 2. array-move 问题描述 在项目开发中,遇到这样一个需求:需要对表格里面的数据进行拖拽排序. 效果图如下所示: 思路 安装两个插件: react-sortable-hoc (或者 react-beautiful-dnd) array-move npm install --save react-sortable-hoc npm install --save array-move 解析 1. react-sortab

  • 纯JS实现可拖拽表单的简单实例

    因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然

  • Dropzone.js实现文件拖拽上传功能(附源码下载)

    Dropzone.js实现文件拖拽上传功能(附源码下载)

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示      源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&

随机推荐