小利的博客

前端新手----

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.效果
这里写图片描述

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014665035/article/details/52370484
文章标签: html stylesheet 插件
个人分类: 插件
上一篇背景渐变 gradient
下一篇css水平垂直居中三种实现方法
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭