jq-ui的Sortable插件 两列布局 左右拖拽

html页面传送门—–http://pan.baidu.com/s/1c21Fqhi

1.先引入

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

2.简单样式

<style>
        ul {
    border: 1px solid Black;height: 500px;width: 100%;display: inline-block;vertical-align: top;padding:0;}
        li {
    list-style-type: none;padding: 10px;}
        li span