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{display: inline-block;margin-left:5px;}        li.ui-state-default{background:transparent none;border:none;}    </style>

3.html部分

<div class="container">    <div class="row">        <div class="col-md-6">            <ul id="sortable1" class="connectedSortable">                <li class="ui-state-default"><input name="Fruit" type="checkbox" value="0"/><span>Item 1</span></li>                <li class="ui-state-default"><input name="Fruit" type="checkbox" value="0"/><span>Item 2</span></li>                <li class="ui-state-default"><input name="Fruit" type="checkbox" value="0"/><span>Item 3</span></li>                <li class="ui-state-default"><input name="Fruit" type="checkbox" value="0"/><span>Item 4</span></li>                <li class="ui-state-default"><input name="Fruit" type="checkbox" value="0"/><span>Item 5</span></li>            </ul>        </div>        <div class="col-md-6">            <ul id="sortable2" class="connectedSortable">                <li class="ui-state-default"><input name="Fruit" type="checkbox" value="0"/><span>Item 6</span></li>                <li class="ui-state-default"><input name="Fruit" type="checkbox" value="1"/><span>Item 7</span></li>                <li class="ui-state-default"><input name="Fruit" type="checkbox" value="2"/><span>Item 8</span></li>                <li class="ui-state-default"><input name="Fruit" type="checkbox" value="3"/><span>Item 9</span></li>                <li class="ui-state-default"><input name="Fruit" type="checkbox" value="4"/><span>Item 10</span></li>            </ul>        </div>    </div></div>

4.jq部分

<script>    $(".connectedSortable input").click(function () {        $(this).parent().toggleClass("selected");    });    $(".connectedSortable").sortable({        connectWith: "#sortable2"  ,        start: function (e, info) {  //拖放后事件,排序开始事件            info.item.siblings(".selected").appendTo(info.item);         },        stop: function (e, info) {  //停止事件            info.item.after(info.item.find("li"));            $(".connectedSortable li").removeClass("selected");            $(".connectedSortable input").prop("checked",false);        },        out: function( event, ui ) {}  //移除事件    });</script>

5.效果