Javascript实现拖拽排序的代码

运行环境:vue3.2以上,复制张贴运行即可看效果
效果如下:

<template>
  <div class="container">
    <transition-group name="flip-list">
      <div v-for="item in items" :key="item" draggable="true" class="items" @dragstart="dragstart(item)"
        @dragenter="dragenter(item)" @dragend="dragend">{{item}}</div>
    </transition-group>
  </div>
</template>

<script setup>
import { ref } from "vue";
const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
const oldNum = ref(0)
const newNum = ref(0)
// 记录初始信息
const dragenter = (param) => {
  newNum.value = param
}
// 做最终操作
const dragend = () => {
  if(oldNum.value !== newNum.value){
    const oldIndex = items.value.indexOf(oldNum.value)
    const newIndex = items.value.indexOf(newNum.value)
    const newItems = [...items.value]
    // 删除老的节点
    newItems.splice(oldIndex,1)
    // 在列表中目标位置增加新的节点
    newItems.splice(newIndex,0,oldNum.value)
    // items改变transition-group就会起作用
    items.value = [...newItems]
  }
}
// 记录移动过程中信息
const dragstart = (param) => {
  oldNum.value = param;
}
</script>
<style scoped>
.items {
  width: 300px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: linear-gradient(45deg, #234, #567);
  color: pink;
}

.flip-list-move {
  transition: transform 1s;
}
</style>

到此这篇关于Javascript实现拖拽排序的文章就介绍到这了,更多相关js拖拽排序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-09-21

JavaScript实现拖拽排序的方法详解

目录 实现原理概述 代码实现 完整代码实现 可拖拽排序的菜单效果大家想必都很熟悉,本次我们通过一个可拖拽排序的九宫格案例来演示其实现原理. 先看一下完成效果: 实现原理概述 拖拽原理 当鼠标在[可拖拽小方块](以下简称砖头)身上按下时,开始监听鼠标移动事件 鼠标事件移动到什么位置,砖头就跟到什么位置 鼠标抬起时,取消鼠标移动事件的监听 排序原理 提前定义好9大坑位的位置(相对外层盒子的left和top) 将9大砖头丢入一个数组,以便后期通过splice方法随意安插和更改砖头的位置 当拖动某块砖头

JS拖拽排序插件Sortable.js用法实例分析

本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js,再然后就有了这篇文章. 特点: 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持单个列表容器内部拖拽排序,也支持两个列表容器互相拖拽排序 支持拖放操作和可选择的文本 非常友善的滚动

Elementui表格组件+sortablejs实现行拖拽排序的示例代码

前言 运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便 效果 实现方式 template部分 <el-table v-loading="loading" :default-sort="{prop: 'sortNum', order: 'ascending'}" :data="list" border align="left" > <el-tab

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

由HTML5的拖放API,实现的简易图片拖放效果. 一.HTML5拖放API的知识点 首先我们得知道元素怎么才可以被拖放,需要设置它们的draggable属性,其中img和a标签的dragable属性默认是true,不需要我们手动设置. 拖放API的监听事件如下: dragstart: 源对象拖拽开始: drag: 源对象拖拽的过程中: dragend: 源对象拖拽结束: dragenter: 进入过程对象区域; dragover: 在过程对象区域内移动: dragleave: 离开过程对象区域

js 实现拖拽排序详情

目录 1.前言 2.实现 3.为何不使用HTML拖放API实现? 4.总结 1.前言 拖拽排序对于小伙伴们来说应该不陌生,平时工作的时候,可能会选择使用类似Sortable.js这样的开源库来实现需求.但在完成需求后,大家有没有没想过拖拽排序是如何实现的呢?我花了点时间研究了一下,今天分享给大家. 2.实现 { margin: 0; padding: 0; box-sizing: border-box; } .grid { display: flex; flex-wrap: wrap; marg

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

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

js实现横向拖拽导航条功能

效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/cs

js实现鼠标拖拽多选功能示例

最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&

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

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

vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

vue拖拽克隆clone组件API, vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档) 效果图: -------------------------------------------------------------------------------- 首先需要安装vuedraggable依赖包: npm install vuedraggable --save 因为拖拽组件依赖sortablejs ,如果项目没有安装sortablejs ,可能需要安装一下 np

Sortable.js拖拽排序使用方法解析

最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上     ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上     ondragover 事件:拖拽元素在目

JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

复制代码 代码如下: <HTML> <HEAD> <TITLE>JS+CSS制作的DIV层最小化和随意拖拽排序功能</TITLE> <style type="text/css"> body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alp

基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; •ng-drop:是否允许放入拖拽元素 •ng-drop-success($data, $event):拖拽元素放入的回调;$data:放入元素数据:$event拖拽事件对象 •ng-drag:元素是否允许拖拽 •ng-drag-success($data, $event):$data:拖拽元素数据,$event拖拽元素事件对象 •