uniapp使用sortablejs实现拖动功能

最新推荐文章于 2025-10-26 16:32:33 发布

原创

最新推荐文章于 2025-10-26 16:32:33 发布 · 3.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #vue.js

本文介绍了如何在uniapp项目中结合sortablejs实现拖动功能。首先，通过指定链接下载并引入sortablejs。接着，配置uniapp以支持sortablejs的运行。最后，详细阐述了在uniapp中使用sortablejs的具体步骤，包括项目结构和实际应用示例。

1.第一步：在项目引入 sortablejs （下载地址：http://micuer.com/data/soft/Sortable.min.js ，
官网：http://www.sortablejs.com/）。
2.第二步：配置支持 sortablejs 在uniapp 里面使用（注意：https://uniapp.dcloud.io/frame?id=renderjs）。
3.第三步：使用 sortablejs 实现功能。

一、项目结构图片
在这里插入图片描述

二、在uniapp 里面使用 sortablejs

<template>
	<view class="s_page">
		<view class="card">
			<view class="cell">
				<text class="f28_999 flex-1">已显示内容</text>
				<text class="f28_999">拖动</text>
			</view>
			<view id="sort" >
				<view class="cell">
					<image class="icon" src="/static/image/order/delte.png" mode=""></image>
					<text class="f32_302 flex-1">待接收工单</text>
					<image class="sort" src="/static/image/matser/index/sort.png" mode=""></image