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

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

JqueryUI拖拽——”放“API

   Options acceptType: Selector or Function() Default: "*" 控制可拖动的元素被拖放接受。 支持多种类型: Selec...

Sortable 拖拽插件 使用文档

插件网址:http://www.runoob.com/jqueryui/api-sortable.html 此插件是让被选元素通过鼠标拖拽然后进行排序。 // 我排版渣— 注意事项: ...

拖放排序插件Sortable.js

拖放排序插件Sortable.js javascript  html5   张淼 1月24日发布 赞  |   7 收藏  |  28 6.1k ...

jquery sortable的拖动方法讲解

所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象    ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象  ...
  • lybwwp
  • lybwwp
  • 2014年01月15日 16:50
  • 5921

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery应用-图片拖拽排序

最近在研究Interface elements for jQuery(http://interface.eyecon.ro/),此插件封装了一些拖拽效果,并且使用非常简单,能轻松实现拖拽排序、购物车、...
  • lee576
  • lee576
  • 2008年04月17日 16:58
  • 3411

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

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

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

移动开发中的上下左右滑动插件jquery.swipe.js非常经典的啊!

移动开发中的上下左右滑动插件jquery.swipe.js 移动(手机+平板)开发中经常会用到手指滑动时调用某些方法,成熟的框架如jQuery mobile,zepto等都有相关的封装,但是...

30 个最棒的 jQuery 的拖放插件

jQuery 允许用户为任意 DOM 元素添加可拖放的功能,通过 jQuery 的拖放插件你可以轻松实现网页上任意元素的拖拽操作。在本文中我们向你推荐 30 个最棒的 jQuery 的拖放插件。 点...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jq-ui的Sortable插件 两列布局 左右拖拽
举报原因:
原因补充:

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