JQuery div标签拖拽排序 flex横向布局

已于 2023-03-13 16:43:39 修改
阅读量335 收藏 2
点赞数
文章标签： jquery javascript 前端
于 2023-03-13 16:42:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011204852/article/details/129497069
版权

背景：
业务标签需要添加拖拽排序的功能。

场景实例：

<div class="common-tags-area">
<div class="tags-area FlexCol short-text-tags" id="shortTagsContainer">
	<div class="common-tag">
		<div class="tags-container FlexCol" onclick="showEditInput(this)">
			<p class="Fill left-text">111</p>
			<img class="delete-tag" onclick="handleDeleteTag(1,0)" alt="img" src="../../../../NewUI/img/tag_close.svg">
		</div>
		<div class="add-input-container FlexCol">
			<input class="add-tag-input" type="text" placeholder="请输入10字以内" maxlength="10"			onkeydown="handleEditSave(event, 1, 2, 0)" oninput="handleTagInput(this)"			onblur="handleEditSave(event, 1, 1, 0)" autofocus="">
			<span class="text-num">0</span>
		</div>
	</div>
	<div class="common-tag">
		<div class="tags-container FlexCol" onclick="showEditInput(this)">
			<p class="Fill left-text">222</p>
			<img class="delete-tag" onclick="handleDeleteTag(1,1)" alt="img" src="../../../../NewUI/img/tag_close.svg">
		</div>
		<div class="add-input-container FlexCol">
			<input class="add-tag-input" type="text" placeholder="请输入10字以内" maxlength="10"			onkeydown="handleEditSave(event, 1, 2, 1)" oninput="handleTagInput(this)"			onblur="handleEditSave(event, 1, 1, 1)" autofocus="">
			<span class="text-num">0</span>
		</div>
	</div>
	<div class="common-tag">
		<div class="tags-container FlexCol" onclick="showEditInput(this)">
			<p class="Fill left-text">333</p>
			<img class="delete-tag" onclick="handleDeleteTag(1,2)" alt="img" src="../../../../NewUI/img/tag_close.svg">
		</div>
		<div class="add-input-container FlexCol">
			<input class="add-tag-input" type="text" placeholder="请输入10字以内" maxlength="10"			onkeydown="handleEditSave(event, 1, 2, 2)" oninput="handleTagInput(this)"			onblur="handleEditSave(event, 1, 1, 2)" autofocus="">
			<span class="text-num">0</span>
		</div>
	</div>
	<div class="common-tag">
		<div class="tags-container FlexCol" onclick="showEditInput(this)">
			<p class="Fill left-text">444</p>
			<img class="delete-tag" onclick="handleDeleteTag(1,3)" alt="img" src="../../../../NewUI/img/tag_close.svg">
		</div>
		<div class="add-input-container FlexCol">
			<input class="add-tag-input" type="text" placeholder="请输入10字以内" maxlength="10"			onkeydown="handleEditSave(event, 1, 2, 3)" oninput="handleTagInput(this)"			onblur="handleEditSave(event, 1, 1, 3)" autofocus="">
			<span class="text-num">0</span>
		</div>
	</div>
	<div class="common-tag">
		<div class="tags-container FlexCol" onclick="showEditInput(this)">
			<p class="Fill left-text">555</p>
			<img class="delete-tag" onclick="handleDeleteTag(1,4)" alt="img" src="../../../../NewUI/img/tag_close.svg">
		</div>
		<div class="add-input-container FlexCol">
			<input class="add-tag-input" type="text" placeholder="请输入10字以内" maxlength="10"			onkeydown="handleEditSave(event, 1, 2, 4)" oninput="handleTagInput(this)"			onblur="handleEditSave(event, 1, 1, 4)" autofocus="">
			<span class="text-num">0</span>
		</div>
	</div>
	<div class="common-tag">
		<div class="tags-container FlexCol" onclick="showEditInput(this)">
			<p class="Fill left-text">666</p>
			<img class="delete-tag" onclick="handleDeleteTag(1,5)" alt="img" src="../../../../NewUI/img/tag_close.svg">
		</div>
		<div class="add-input-container FlexCol">
			<input class="add-tag-input" type="text" placeholder="请输入10字以内" maxlength="10"			onkeydown="handleEditSave(event, 1, 2, 5)" oninput="handleTagInput(this)"			onblur="handleEditSave(event, 1, 1, 5)" autofocus="">
			<span class="text-num">0</span>
		</div>
	</div>
	<div class="common-tag">
		<div class="tags-container FlexCol" onclick="showEditInput(this)">
			<p class="Fill left-text">777</p>
			<img class="delete-tag" onclick="handleDeleteTag(1,6)" alt="img" src="../../../../NewUI/img/tag_close.svg">
		</div>
		<div class="add-input-container FlexCol">
			<input class="add-tag-input" type="text" placeholder="请输入10字以内" maxlength="10"			onkeydown="handleEditSave(event, 1, 2, 6)" oninput="handleTagInput(this)"			onblur="handleEditSave(event, 1, 1, 6)" autofocus="">
			<span class="text-num">0</span>
		</div>
	</div>
	<div class="common-tag">
		<div class="tags-container FlexCol" onclick="showEditInput(this)">
			<p class="Fill left-text">888</p>
			<img class="delete-tag" onclick="handleDeleteTag(1,7)" alt="img" src="../../../../NewUI/img/tag_close.svg">
		</div>
		<div class="add-input-container FlexCol">
			<input class="add-tag-input" type="text" placeholder="请输入10字以内" maxlength="10"			onkeydown="handleEditSave(event, 1, 2, 7)" oninput="handleTagInput(this)"			onblur="handleEditSave(event, 1, 1, 7)" autofocus="">
			<span class="text-num">0</span>
		</div>
	</div>
	<div class="common-tag">
		<div class="tags-container FlexCol" onclick="showEditInput(this)">
			<p class="Fill left-text">999</p>
			<img class="delete-tag" onclick="handleDeleteTag(1,8)" alt="img" src="../../../../NewUI/img/tag_close.svg">
		</div>
		<div class="add-input-container FlexCol">
			<input class="add-tag-input" type="text" placeholder="请输入10字以内" maxlength="10"			onkeydown="handleEditSave(event, 1, 2, 8)" oninput="handleTagInput(this)"			onblur="handleEditSave(event, 1, 1, 8)" autofocus="">
			<span class="text-num">0</span>
		</div>
	</div>
	<div class="common-tag">
		<div class="tags-container FlexCol" onclick="showEditInput(this)">
			<p class="Fill left-text">000</p>
			<img class="delete-tag" onclick="handleDeleteTag(1,9)" alt="img" src="../../../../NewUI/img/tag_close.svg">
		</div>
		<div class="add-input-container FlexCol">
			<input class="add-tag-input" type="text" placeholder="请输入10字以内" maxlength="10"			onkeydown="handleEditSave(event, 1, 2, 9)" oninput="handleTagInput(this)"			onblur="handleEditSave(event, 1, 1, 9)" autofocus="">
			<span class="text-num">0</span>
		</div>
	</div>
	<div class="add-tag-container FlexCol">
		<div class="add-input-container FlexCol">
			<input class="add-tag-input" type="text" placeholder="请输入10字以内" maxlength="10"			onkeydown="handleSave(event, 1,2)" oninput="handleTagInput(this)" onblur="handleSave(event,1,1)"			autofocus="">
			<span class="text-num">0</span>
		</div>
		<button class="add-btn" onclick="handleShowInput(this)">
			<img alt="img" src="../../../../NewUI/img/add_tag.svg">
		</button>
	</div>
</div>
</div>

显示界面

过程：
查找网上的自实现方法，都会有各种各样的问题。寻找一圈，找到了一个排序插件：
SortableJs插件地址
官方Demo
在官方Demo页面，找到JQuery对应的插件地址：图示
集成实现方法：
Html页面引入JS：
在这里插入图片描述
JS绑定拖拽：

    $('.short-text-tags').sortable({
        draggable: ".common-tag", // 区域内需要拖拽的元素
        filter: ".add-tag-container", // 区域内不允许拖拽的元素
        onEnd: function (evt) {
			// 编写拖拽完成时事件
        }
    });

完成后效果：
在这里插入图片描述

当前插件支持更多可配置项：
在这里插入图片描述

董家郎
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HarmonyOS中利用overflow属性实现横向滚动失效的解决方法
the_ghostzzz的博客
05-17 1031
HarmonyOS中overflow实现横向布局失效解决方案
jQuery实现div横向拖拽排序的简单实例
10-21
下面小编就为大家带来一篇jQuery实现div横向拖拽排序的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS实现DIV的拖动
qq_51076413的博客
05-26 1251
html中实现DIV的拖动功能，JS实现DIV的拖动
推荐一款轻量级的jQuery拖动插件 —— jQuery.dragmove
gitblog_00032的博客
06-05 440
推荐一款轻量级的jQuery拖动插件 —— jQuery.dragmove 项目地址:https://gitcode.com/nathco/jQuery.dragmove 在网页交互设计中，可拖动元素的功能已经被广泛应用，从简单的列表排序到复杂的游戏界面。然而，实现这一功能通常需要依赖大型的库如jQuery UI。现在，有了jQuery.dragmove，你可以轻松地为DOM元素添加拖动功能，而无...
Bootstrap（一）——简介、布局容器和工具类使用(flex布局)
Erya Programming learning
06-23 2016
一、Bootstrap简介 Bootstrap是由twitter公司设计师基于html，css，js开发的简洁、开源、强大、优雅的UI框架。 UI框架就是能够快速构建html架构的框架。 内置了大量的css类，供元素使用。 Bootstrap由一个css库和一个js库组成，动态部分是依赖jquery一个js类库完成的。 Bootstrap = jquery + css 二、布局容器 2.1定宽容器 container container的css，会根据屏幕宽度变更宽度，并且居中，定死最大宽
多Tabs的横向滚动插件（支持Zepto和jQuery）
aizhen0916的博客
03-10 239
一. 效果图 二. 功能介绍 　　1. 支持横向移动 　　2. 支持点击Tab后该Tab居中 　　3. 拉到最左边和最右边后依然可以拉动，只是tabs的移动距离变小。 三. 使用说明 　　1. 在你的html中添加Tabs相关的代码。 <div class="analysis-tabs-title"> <ul> &...
网页多栏布局&可拖动改变每一栏宽度
@不喝海之言@
08-28 2602
网页多栏布局&拖动改变每一栏的宽度 网页多栏布局是一个非常常见的布局方式，实现网页多栏布局的方式有很多种，但是要把分成多栏的网页变成点击某一栏可以拖拽改变宽度的那又是另一个麻烦事。 接下来我就给大家说一下我的一个简单的实现方式 首先要明确我们需要达到的效果： 我们的网页多栏布局，不论是横向的多栏还是竖向多栏。【我以横向三栏排列为例】 每一栏拖动边框时可以动态的改变宽度。 以网页中...
横向时间轴的代码实现，亲测可行
ating_ing的博客
08-24 505
横向时间轴组件
横向nav导航隐藏溢出拖动移动效果
qq_34451947的博客
11-27 1005
直接上效果图 本次效果使用了 jq 和swiper 不是原生 话不多少上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>横向滚动条</title> <meta name="viewport" content="wi...
VUE2中做一个类似于jQuery拖动时间轴的组件
qq_45599738的博客
08-18 2595
jQuery拖动时间轴的演示地址 https://www.jq22.com/yanshi20974此处是我已经实现了的全部功能，诸君直接可以用，但是会有一个非常严重的性能问题要和诸君提前说一下。 在JQ的演示中不管创建多少个滑块浏览器都不会掉帧，滑动也非常顺畅，但是在vue项目中当滑块变多后会导致浏览器严重的掉帧问题，CPU占用率也会飙升，初步判断是因为vue是用数据驱动虚拟DOM而我其中是的操作是大量的DOM操作导致的，如果诸君在使用过程中改善了其性能请留言分享，在下感激不尽。 话不多说，上代码。类似$t
jQuery UI -- widgets各种部件的使用
RedGuy_anluo的博客
05-17 1161
注意：如果需要使用到 jQueryUI的icons，那么需要将下载的文件中的images文件夹拷贝到项目中，最好是在做项目的时候将下载的整体插件全部拷贝进去，方便使用。 下面的代码中基本包含了所有部件的使用，所以代码有点凌乱。html5文件：（中间包含了JS脚本和css样式）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
jquery拖拽排序插件div自由拖动排序代码
11-10
在给定的标题“jquery拖拽排序插件div自由拖动排序代码”中，我们主要讨论的是如何利用jQuery实现一个功能，让用户能够自由地通过拖放操作来对页面上的div元素进行排序。这种功能在许多应用场景中都非常实用，比如...
jquery div拖动排序效果代码.zip
07-04
本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果，结合CSS样式，创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先，我们需要在HTML中设置好基础结构。创建一系列的div元素，每个div代表一个...
Jquery Sortable实现div拖动排序效果
10-27
本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先，你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库，而 jQuery UI 提供了包括Sortable在内的多种...
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 681
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 646
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 914
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 241
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值