【第22期】观点:IT 行业加班,到底有没有价值?

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,页面横向纵向拖动布局的方法。

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

jQuery插件:超酷的多列网格式拖放插件gridster.js

转自:http://blog.csdn.net/jjfat/article/details/7868322 日期:2012-8-15  来源:GBin1.com 在线演示  本...

JQuery UI的拖拽功能实现方法小结

JQuery UI的拖拽功能实现方法小结 作者: 字体:[增加 减小] 类型:转载 JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互、动画、特效等API,...

jquery UI 写的拖拽功能

jQuery UI Draggable - Handles        http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui....

jquery UI拖拽插件Draggable的使用

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

jqueryui 拖拽

jQuery UI Droppable - Simple photo manager #gallery { float: left; /*w...

JQuery UI的拖拽功能

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互、动画、特效等API,并且封装了一些Web小部件(Widget)。同时,JQuery UI继承了jquery的插件支持,有大量...

jQuery Easy UI Draggable(拖动)组件

上文已经提到过了 jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的Draggable组件同样有两种方式加载: (1)、使用class加载方...

jquery UI 跟随学习笔记——拖拽(Draggable)

jquery UI 跟随学习笔记——拖拽(Draggable) 引言      这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI 插件,以及jqu...

jQuery插件jquery ui实现拖放

cusor为move表示光标为move类型,cursorAt指示光标所在的位置。当删除了拖拽功能后,必须要再次调用draggable()才能继续使用拖拽
  • 微博
    微信
    QQ
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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