当前位置: 首页 > news >正文

DDSort-简单实用的jQuery拖拽排序插件

DDSort.js是一款简单实用的jQuery拖拽排序插件。通过该插件你可以任意拖动页面中元素,并放置到指定的地方。DDSort.js插件实用简单,兼容IE8浏览器。

在这里插入图片描述

在线预览 下载

使用方法

实用该拖拽排序插件需要在页面中引入jquery文件和ddsort.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddsort.js"></script>

HTML结构
如果你使用一个无序列表作为你需要拖拽排序的元素,结构如下:

<div id="wrap"><ul><li>...</li><li>...</li>...</ul>
</div>    

初始化插件
在页面DOM元素加载完毕之后,可以通过DDSort()方法来初始化插件。

$( '#wrap' ).DDSort({target: 'li',             //拖拽的目标元素,默认即'li'floatStyle: {           //拖拽元素的样式,默认有一定的样式'border': '1px solid #ccc','background-color': '#fff'}
});   

如果拖放列表带有滚动条,那么$( ‘#wrap’ )需要是这个带滚动条的元素。

配置参数

参数类型描述
targetstring可选,插件内部使用的是jQuery的on方法绑定的事件,此参数就是on方法上的选择器字符串,默认'li'
cloneStyleobject可选,设置占位符元素的样式
floatStyleobject可选,设置拖动元素的样式
downfunction可选,鼠标按下时执行的函数
movefunction可选,鼠标移动时执行的函数
upfunction可选,鼠标抬起时执行的函数
http://www.lryc.cn/news/511424.html

相关文章:

  • 「下载」智慧园区及重点区域安全防范解决方案:框架统一规划,建设集成管理平台
  • 华为 IPD,究竟有什么特点?(一)
  • Llama 3 后训练(三)
  • Docker 安装全攻略:从入门到上手
  • 螺杆支撑座在运用中会出现哪些问题?
  • Java与SQL Server数据库连接的实践与要点
  • 客户案例:基于慧集通的致远OA与海康威视智能会议设备集成方案
  • 嵌入式驱动开发详解7(并发、竞争、中断)
  • @repository注解
  • Linux top指令
  • Anaconda 安装与虚拟环境创建完整指南
  • 基于自然语言处理(NLP)的智能客服系统
  • C语言期末复习题(PTA)
  • Ubuntu 中安装 RabbitMQ 教程
  • 如何测试模型推理精度:Python初学者指南
  • 人工智能与区块链的碰撞:双剑合璧的创新前景
  • 安装Visual studio2022后,没法新建.net 4.5.2的项目
  • 小程序配置文件 —— 12 全局配置 - pages配置
  • Flink Data Source详解
  • Spring Boot 介绍与应用
  • 并行编程实战——TBB框架的应用之五Supra中IGTL的应用
  • 【Golang 面试题】每日 3 题(八)
  • 11. 日常算法
  • FPGA三模冗余TMR工具(二)
  • springboot499基于javaweb的城乡居民基本医疗信息管理系统(论文+源码)_kaic
  • MF248:复制工作表形状到Word并调整多形状位置
  • 微信流量主挑战:用户破16!新增文档转换(新纪元3)
  • SelectionArea 实现富文本
  • upload-labs关卡记录17
  • 【Next.js】002-路由篇|App Router