1.首先是实现拖动效果，代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: ; padding: ; width: %; }
#sortable li { margin: px px px; padding: em; padding-left: em; font-size: em; height: px; }
#sortable li span { position: absolute; margin-left: -em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</body>
</html>
注意，该插件必须，使用
<ul>
和
<li>
标签才能够实现，如果你需要的结构是
<div>
那么没关系，只要把你的结构写在
<li>
标签中就可以了。
2.sortable插件对blur事件的影响
好，那么问题来了，假设
<li>
中我写的是如下代码
<div style="height:100px">
<input type="text" class="description"/>
</div>
而且我针对input绑定了一个失去焦点的事件blur。
那么效果是这样的，当鼠标点击进入input后，input得到焦点，然后我们鼠标在空白处点击一下。
注意这里的空白处不是随便的空白处，这里的空白处是指的当前
<li>
节点范围内的空白处，包括本例子中的子元素
<div>
范围内。
此时我们预测的结果是我绑定的blur事件会被触发，但实际上你会看到结果，光标仍然在input中闪烁并没有失去焦点。
下面提供解决办法，直接看代码：
<script>
$(window).load(function(){
$('#sortable').mousedown(function(){
document.activeElement.blur();
});
});
</script>
同样对使用了sortable插件的
<ul>
绑定上述事件即可开启被屏蔽掉的事件blur，至此该问题得到了有效的解决方案。
![JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明 三、函数的调用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)