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

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.kler.cn/a/463933.html

相关文章:

  • 数据结构与算法之动态规划: LeetCode 213. 打家劫舍 II (Ts版)
  • UE5 Debug的一些心得
  • 分析服务器 systemctl 启动gozero项目报错的解决方案
  • 《Xsens动捕与人形机器人训练》讲座将于1月9日下午2:30在线上召开
  • 实现单例模式的五种方式
  • parquet文件数据格式介绍以及python pandas对parquet常见操作
  • NLP论文速读(NeurIPS 2024)|BERT作为生成式上下文学习者BERTs are Generative In-Context Learners
  • Microsoft SQL Server Integration Services (SSIS) 详细介绍
  • 树型DP # 战略游戏
  • 【JS】期约的Promise.all()和 Promise.race()区别
  • MySQL SQL元查询详解(10k,含运行实例、分析)
  • 验证二叉搜索树
  • LeetCode-最长公共前缀(014)
  • 闯关leetcode——3136. Valid Word
  • C++软件设计模式之责任链模式
  • 【2024年-12月-18日-开源社区openEuler实践记录】openeuler - jenkins:开源项目持续集成与交付的幕后引擎
  • OpenCV调整图像亮度和对比度
  • 【NLP高频面题 - LLM训练篇】为什么要对LLM做有监督微调(SFT)?
  • 使用apisix+oidc+casdoor配置微服务网关
  • 第二讲 比特币的技术基础
  • GPU 进阶笔记(三):华为 NPU/GPU 演进
  • 【Spring MVC 异常处理机制】应对意外情况
  • Pandas-数据分组
  • Seata AT 模式两阶段过程原理解析【seata AT模式如何做到对业务的无侵入】
  • 前端:轮播图常见的几种实现方式
  • CSS 实现无限滚动的列表