`

一个轻量级的jQuery拖拽排序插件 - HTML5 Sortable

阅读更多

日期:2012-7-26  来源:GBin1.com

一个轻量级的jQuery拖拽排序插件 - HTML5 Sortable

在线演示   本地下载

如果大家提到拖放相关插件 的话,肯定会想到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

分享到:
评论

相关推荐

    jQuery实现拖拽排序插件Sortable.js.zip

    Sortable.js是基于jQuery的一个轻量级、高性能的拖拽排序插件,它允许用户通过鼠标拖放元素来改变列表中的顺序,适用于各种列表或网格布局。该插件不仅支持HTML列表(如`&lt;ul&gt;`和`&lt;ol&gt;`),还能够处理自定义DOM结构,...

    前端项目-html5sortable.zip

    《HTML5Sortable:轻量级jQuery插件与前端可排序列表构建详解》 在现代Web开发中,交互性是提升用户体验的关键因素之一。一个优秀的前端项目不仅需要美观的设计,更需要便捷的操作方式。HTML5Sortable是一款基于...

    jQuery拖拽排序插件DDSort.js.zip

    首先,DDSort.js是一款基于jQuery的轻量级插件,它的主要功能是让用户能够通过鼠标拖拽来改变列表元素的顺序。这个特性在诸如任务管理、列表排序等场景下非常有用,可以提供直观且友好的操作体验。DDSort.js的设计...

    Js排序插件Sortable

    Sortable 是一个轻量级、高度可定制的JavaScript排序库,它使得在HTML元素上实现拖放排序变得简单易行。这个插件支持原生的DOM操作,兼容现代浏览器和IE9+,并且无需依赖任何其他库,如jQuery。其强大的功能和灵活性...

    jQuery拖拽排序插件DDSort.js

    DDSort.js是一个基于jQuery的轻量级插件,它使得开发者能够轻松实现页面元素的拖拽排序功能,无需编写大量的JavaScript代码。这个插件适用于需要动态调整列表或网格顺序的应用场景,如项目管理、任务列表或者自定义...

    html5sortable

    HTML5 Sortable是一个轻量级的JavaScript库,它利用了HTML5中的拖放API来实现元素的排序功能。这个库使得在网页上创建可交互、可拖动排序的列表变得非常简单,无需复杂的jQuery插件或者原生JavaScript代码。下面我们...

    jQuery拖拽插件实现的拖拽排序效果源码.zip

    3. **轻量级拖拽插件**:如果你的项目对加载速度有较高要求,可以考虑使用轻量级插件,如`jquery.sortable.js`。这个插件不需要整个`jQuery UI`库,只专注于实现拖拽排序功能。使用方式相对简单,只需引入插件文件,...

    jQuery鼠标上下拖动div排序代码

    首先,jQuery是JavaScript的一个轻量级库,它简化了DOM操作、事件处理、动画设计和Ajax交互。在实现div拖动排序的过程中,我们主要利用jQuery的事件绑定和DOM操作功能。 1. **基础准备**:在HTML文件(如index.html...

    jquery插件集-拖拽

    3. **jQuery Easy Draggable**:这个插件以其轻量级和简单易用为特点,适合那些只需要基础拖放功能且不希望引入大型库的项目。它提供最少的配置选项,如`handle`用于指定拖动手柄,以及简单的事件回调,如`...

    jQuery可任意拖拽排序菜单树机构树特效代码

    在这个实例中,我们使用的是`sortable-lists.min.js`,这是一个轻量级的jQuery插件,专门用于实现列表的拖拽排序功能。 在项目中,我们有以下核心组成部分: 1. **index.html**:这是整个应用的入口文件,包含了...

    无jQuery实现拖拽排序Sortable.zip

    总的来说,无jQuery实现的拖拽排序Sortable库是一个强大的工具,它能够帮助开发者轻松创建响应式、跨平台的拖放排序功能。由于它不依赖jQuery,因此更适合现代Web开发,尤其是在考虑性能和兼容性的情况下。通过灵活...

    jQuery拖拽排序

    在实际开发中,为了简化这一过程,往往会选择使用现成的jQuery插件,例如`jQuery UI Sortable`或者轻量级的`Sortable.js`。这些插件已经封装了上述的逻辑,只需要简单配置就能实现拖拽排序功能。 `jQuery UI ...

    Sortable-master.zip

    在这个"Sortable-master"项目中,开发者可能基于原生JavaScript实现了一个轻量级的拖动排序功能,避免了引入大型库如jQuery或React等带来的额外负担。这样的实现方式对性能优化和页面加载速度是有益的。 拖动排序的...

    sortable.js(jquery.fn.sortable、jquery.fn.sortable.min.js)最新版

    `sortable.js`是一款基于jQuery的拖拽排序插件,它为HTML列表和其他元素提供了轻量级、高效的排序功能。在最新版本中,包括了`jquery.fn.sortable.js`和其压缩版`jquery.fn.sortable.min.js`,以及可能的替代版本`...

    jQuery拖拽插件啦啦啦

    这些插件通常更轻量级,且具有特定的功能,如网格布局、多选拖拽等。例如,`gridstack.js`可以方便地创建可拖动和可调整大小的网格布局。 4. **事件处理**: 在拖拽过程中,jQuery拖拽插件通常会触发一些事件,如`...

    JS实现图片拖拽排序(亲测可用)

    jQuery是一个轻量级的JavaScript库,简化了DOM操作、事件处理以及AJAX交互等任务。 1. **HTML结构**:创建一个包含图片的容器,每个图片都应该是一个可以拖动的元素。通常,这些图片会被包裹在`&lt;div&gt;`或`&lt;li&gt;`元素...

    Html元素拖动排序

    - `SortableJS`: 这是一个轻量级的JavaScript库,不依赖任何其他框架,适用于原生JavaScript项目。它的API简洁易用,且性能优秀。 三、使用场景 HTML元素拖动排序广泛应用于各种Web应用,如: - 列表管理:用户...

    最新Sortable – 简单灵活的 JavaScript 拖放排序插件

    总之,Sortable是一个高效、灵活的JavaScript拖放排序插件,它简化了在网页中实现动态排序的复杂性,同时提供了丰富的定制选项,以满足不同项目的具体需求。无论你是前端新手还是经验丰富的开发者,Sortable都能帮助...

    JQ JS javascript layui UI组件 元素 div 拖动插件

    为了实现这个功能,开发者可能编写了一个自定义的jQuery扩展或layui插件,或者使用了已有的开源库,如draggable或sortable。这些库通常提供了丰富的配置项和回调函数,允许定制拖动行为。 在压缩包的"UI组件拖动...

Global site tag (gtag.js) - Google Analytics