日期:2012-7-26 来源:GBin1.com
在线演示
本地下载
如果大家提到拖放相关插件
的话,肯定会想到jQuery UI
,这个UI类库包含了你需要用到的几乎所有组件,但是如果你只想使用jQuery UI
中的某一个组件,例如,拖放组件的话,调用如此大的一个类库会有有杀鸡用宰牛刀的感觉,今天这里我们将介绍一个轻量级的jQuery drag and drop
插件 - HTML5 Sortable
。它能够帮助你创建可拖拽的列表和网格元素,希望大家喜欢!
主要特性
- 非常小(压缩版1kb)
- 使用HTML5的本地拖放API
- 支持列表和网格样式布局
- 非常类似jQuery UI的排序插件
- 支持IE
5.5+,Firefox3.5+,Chrome3+,Safari3+和Opera12+
- API兼容jQuery UI
,你可以使用jQuery UI
作为polyfill来支持老版本浏览器
如何使用
使用非常简单:
<ul class="gbsortable">
<li>Item 1
<li>Item 2
<li>Item 3
<li>Item 4
</ul>
<script src="jquery.sortable.js"></script>
<script>
$('.gbsortable').sortable();
</script>
主要参数和方法
参数:
- items:指定需要排序的元素
- connectWith:创建相关的列表
方法:
- sortupdate:顺序改变后调用方法,比如,顺序改变后保存新的排序
- disable:临时关闭排序功能
- enable:打开排序功能
- destroy:销毁排序功能
来源:一个轻量级的jQuery拖拽排序插件 - HTML5 Sortable
分享到:
相关推荐
Sortable.js是基于jQuery的一个轻量级、高性能的拖拽排序插件,它允许用户通过鼠标拖放元素来改变列表中的顺序,适用于各种列表或网格布局。该插件不仅支持HTML列表(如`<ul>`和`<ol>`),还能够处理自定义DOM结构,...
《HTML5Sortable:轻量级jQuery插件与前端可排序列表构建详解》 在现代Web开发中,交互性是提升用户体验的关键因素之一。一个优秀的前端项目不仅需要美观的设计,更需要便捷的操作方式。HTML5Sortable是一款基于...
首先,DDSort.js是一款基于jQuery的轻量级插件,它的主要功能是让用户能够通过鼠标拖拽来改变列表元素的顺序。这个特性在诸如任务管理、列表排序等场景下非常有用,可以提供直观且友好的操作体验。DDSort.js的设计...
Sortable 是一个轻量级、高度可定制的JavaScript排序库,它使得在HTML元素上实现拖放排序变得简单易行。这个插件支持原生的DOM操作,兼容现代浏览器和IE9+,并且无需依赖任何其他库,如jQuery。其强大的功能和灵活性...
DDSort.js是一个基于jQuery的轻量级插件,它使得开发者能够轻松实现页面元素的拖拽排序功能,无需编写大量的JavaScript代码。这个插件适用于需要动态调整列表或网格顺序的应用场景,如项目管理、任务列表或者自定义...
HTML5 Sortable是一个轻量级的JavaScript库,它利用了HTML5中的拖放API来实现元素的排序功能。这个库使得在网页上创建可交互、可拖动排序的列表变得非常简单,无需复杂的jQuery插件或者原生JavaScript代码。下面我们...
3. **轻量级拖拽插件**:如果你的项目对加载速度有较高要求,可以考虑使用轻量级插件,如`jquery.sortable.js`。这个插件不需要整个`jQuery UI`库,只专注于实现拖拽排序功能。使用方式相对简单,只需引入插件文件,...
首先,jQuery是JavaScript的一个轻量级库,它简化了DOM操作、事件处理、动画设计和Ajax交互。在实现div拖动排序的过程中,我们主要利用jQuery的事件绑定和DOM操作功能。 1. **基础准备**:在HTML文件(如index.html...
3. **jQuery Easy Draggable**:这个插件以其轻量级和简单易用为特点,适合那些只需要基础拖放功能且不希望引入大型库的项目。它提供最少的配置选项,如`handle`用于指定拖动手柄,以及简单的事件回调,如`...
在这个实例中,我们使用的是`sortable-lists.min.js`,这是一个轻量级的jQuery插件,专门用于实现列表的拖拽排序功能。 在项目中,我们有以下核心组成部分: 1. **index.html**:这是整个应用的入口文件,包含了...
总的来说,无jQuery实现的拖拽排序Sortable库是一个强大的工具,它能够帮助开发者轻松创建响应式、跨平台的拖放排序功能。由于它不依赖jQuery,因此更适合现代Web开发,尤其是在考虑性能和兼容性的情况下。通过灵活...
在实际开发中,为了简化这一过程,往往会选择使用现成的jQuery插件,例如`jQuery UI Sortable`或者轻量级的`Sortable.js`。这些插件已经封装了上述的逻辑,只需要简单配置就能实现拖拽排序功能。 `jQuery UI ...
在这个"Sortable-master"项目中,开发者可能基于原生JavaScript实现了一个轻量级的拖动排序功能,避免了引入大型库如jQuery或React等带来的额外负担。这样的实现方式对性能优化和页面加载速度是有益的。 拖动排序的...
`sortable.js`是一款基于jQuery的拖拽排序插件,它为HTML列表和其他元素提供了轻量级、高效的排序功能。在最新版本中,包括了`jquery.fn.sortable.js`和其压缩版`jquery.fn.sortable.min.js`,以及可能的替代版本`...
这些插件通常更轻量级,且具有特定的功能,如网格布局、多选拖拽等。例如,`gridstack.js`可以方便地创建可拖动和可调整大小的网格布局。 4. **事件处理**: 在拖拽过程中,jQuery拖拽插件通常会触发一些事件,如`...
jQuery是一个轻量级的JavaScript库,简化了DOM操作、事件处理以及AJAX交互等任务。 1. **HTML结构**:创建一个包含图片的容器,每个图片都应该是一个可以拖动的元素。通常,这些图片会被包裹在`<div>`或`<li>`元素...
- `SortableJS`: 这是一个轻量级的JavaScript库,不依赖任何其他框架,适用于原生JavaScript项目。它的API简洁易用,且性能优秀。 三、使用场景 HTML元素拖动排序广泛应用于各种Web应用,如: - 列表管理:用户...
总之,Sortable是一个高效、灵活的JavaScript拖放排序插件,它简化了在网页中实现动态排序的复杂性,同时提供了丰富的定制选项,以满足不同项目的具体需求。无论你是前端新手还是经验丰富的开发者,Sortable都能帮助...
为了实现这个功能,开发者可能编写了一个自定义的jQuery扩展或layui插件,或者使用了已有的开源库,如draggable或sortable。这些库通常提供了丰富的配置项和回调函数,允许定制拖动行为。 在压缩包的"UI组件拖动...