html如何调整选项的显示顺序的插件

如果你用过 jQuery UI，那么你应该会知道它内置有一个拖动排序(sortable)的功能。今天给大家推荐一个轻量级的拖动排序插件，让你能够摆脱 jQuery UI。

HTML5 Sortable 是一个简单易用的轻量级 jQuery 插件，它可让你轻松实现列表的拖动排序功能，它基于原生 HTML5 的拖动 API 而实现。更重要的一点是它支持包括 IE 在内的所有主流浏览器。

如何使用

请参考http://farhadi.ir/projects/html5sortable/

首先引入 jQuery 框架HTML5 Sortable 插件。

1、<script src="jquery.min.js"></script>

2、<script src="jquery.sortable.js"></script>

然后像这样添加一个 UL 列表，同时可以再加上自定义的样式。

<ul class="sortable"

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ul>

最后初始化 

//初始化

$('.sortable').sortable()

//绑定方法:当改变排序后执行

$('.sortable').sortable().bind('sortupdate', function() {//Triggered when the user stopped sorting and the DOM position has changed. })

//移除拖动排序功能

$('.sortable').sortable('destroy')

html5 拖动效果在手机上实现方法是调用drag和drop一系列函数实现的。

注意：拖拽源在拖拽 *** 作结束将得到dragend事件对象，不管 *** 作成功与否。

举例：

定义可拖放内容

<div id="columns">

 <div class="column" draggable="true"><header>A</header></div>

 <div class="column" draggable="true"><header>B</header></div>

 <div class="column" draggable="true"><header>C</header></div>

</div>

2、监听拖动事件

可附加大量不同事件以监听整个拖放过程：

dragstart

drag

dragenter

dragleave

dragover

drop

dragend

a.这里是开始拖拽

function handleDragStart(e) {

 this.style.opacity = '0.4' // this / e.target is the source node.

}

var cols = document.querySelectorAll('#columns .column')

[].forEach.call(cols, function(col) {

 col.addEventListener('dragstart', handleDragStart, false)

})

b.dragenter、dragover 和 dragleave 事件处理程序可用于在拖动过程中提供额外的可视化提示。例如，在拖动期间将鼠标悬停在某一列上方时，其边框可能会变成虚线。这样，用户就能知道这些列也是放置的目标区域。

---