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

原创 2016年08月30日 16:25:00

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

利用jQuery UI为CMS网站实现拖拽布局效果,秒杀table布局

其实table和div这两种布局方式是互为优劣的。但是目前来说div越来越成为一种主流设计方式,其布局效果灵活、样式新颖的特点也越来越受到青睐。而且这里我们所讲的,如果你想使用拖拽的方式轻松实现页面布...

关于jquery-ui,页面横向纵向拖动布局的方法。

$(function() {     $( ".sortable" ).sortable({     placeholder: "ui-state-highlight" , //拖动时,用css...

React实战-基于Storybook的React组件测试

React实战-基于Storybook的React组件测试 ReactJs的测试方法和测试工具很多,主要有Jtest、Karma,但是有一些小的第三方工具也很简单、方便,其中StoryBook这款小工...

jquery UI拖拽插件Draggable的使用

正文:Draggable(拖拽)      1、默认配置:就是简单的一行代码:$( "#目标元素Id" ).draggable(); title>jqeruy UI 拖拽练...

前端拖拽插件gridster.js介绍与使用示例

前端拖拽插件gridster.js中文文档 2014-8-6 10:11 gridster.js是一款基于jquery的前端拖拽插件,效果相当的不错,大家可以先看看Demo(http://gridst...

jQuery插件jquery ui实现拖放

cusor为move表示光标为move类型,cursorAt指示光标所在的位置。当删除了拖拽功能后,必须要再次调用draggable()才能继续使用拖拽 <script src="../pub

利用jQuery-UI和jsPlumb实现拖拽连接模型

之前公司需要做一个自定义数据搜索模型的功能,大体是这样的:左边显示的每一个模型对应于数据库中的一个表,把左边的模型拉入右边的容器内,会显示这个模型(也就是表)下的列信息,然后通过连线确定各独立的模型之...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)