1.首先是实现拖动效果，代码如下

  
         
           
         
     
  
      
Item 1
  
      
Item 2
  
      
Item 3
  
      
Item 4
  
      
Item 5
  
      
Item 6
  
      
Item 7
     

注意，该插件必须，使用<ul>和<li>标签才能够实现，如果你需要的结构是<div>那么没关系，只要把你的结构写在<li>标签中就可以了。

2.sortable插件对blur事件的影响

好，那么问题来了，假设<li>中我写的是如下代码

而且我针对input绑定了一个失去焦点的事件blur。

那么效果是这样的，当鼠标点击进入input后，input得到焦点，然后我们鼠标在空白处点击一下。

注意这里的空白处不是随便的空白处，这里的空白处是指的当前<li>节点范围内的空白处，包括本例子中的子元素<div>范围内。

此时我们预测的结果是我绑定的blur事件会被触发，但实际上你会看到结果，光标仍然在input中闪烁并没有失去焦点。

下面提供解决办法，直接看代码：

同样对使用了sortable插件的<ul>绑定上述事件即可开启被屏蔽掉的事件blur，至此该问题得到了有效的解决方案。