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越来越成为一种主流设计方式,其布局效果灵活、样式新颖的特点也越来越受到青睐。而且这里我们所讲的,如果你想使用拖拽的方式轻松实现页面布...
  • dongdong9223
  • dongdong9223
  • 2015年05月26日 15:04
  • 4398

jQuery ui drag插件实现浮动div拖动排列布局代码

  • 2016年05月05日 10:45
  • 77KB
  • 下载

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

之前公司需要做一个自定义数据搜索模型的功能,大体是这样的:左边显示的每一个模型对应于数据库中的一个表,把左边的模型拉入右边的容器内,会显示这个模型(也就是表)下的列信息,然后通过连线确定各独立的模型之...
  • CSDN_XueXiaoQiang
  • CSDN_XueXiaoQiang
  • 2017年03月17日 12:03
  • 4980

jquery UI拖拽插件Draggable的使用

正文:Draggable(拖拽)      1、默认配置:就是简单的一行代码:$( "#目标元素Id" ).draggable(); title>jqeruy UI 拖拽练...
  • w405722907
  • w405722907
  • 2017年07月05日 11:43
  • 645

【JQuery UI】拖曳插件——draggable

拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector...
  • happyhaojie
  • happyhaojie
  • 2016年04月07日 11:17
  • 499

超级强大的jquery UI多功能拖拽交互效果源代码

  • 2009年05月06日 11:05
  • 1.33MB
  • 下载

easyui-dialog禁止拖动的办法

因为dialog继承了window事件,window事件继承了panel事件。用panel事件,onMove即可完成静止拖动dialog,并且移动鼠标icon也会消失。   ...
  • foart
  • foart
  • 2013年08月26日 15:10
  • 14186

jquery UI 实例——拖拽(Draggable)

默认功能 在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。 lang="en"> charset="utf-8"> ...
  • u012248761
  • u012248761
  • 2016年03月11日 10:08
  • 782

两栏布局右侧自适应+左右拖动改变两栏宽度

今天一下午的学习成果,分享一下,欢迎高手指教。 首先是布局,左右两栏布局,中间留出可拖动的地方。布局很简单,左边一个div,右边一个div,中间的div是用来拖动的。 1 DOCTYPE...
  • dyllove98
  • dyllove98
  • 2013年06月18日 20:18
  • 1616

Jquery UI sortable 所有事件

所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象    ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
  • mingqingyuefeng
  • mingqingyuefeng
  • 2017年06月29日 17:17
  • 755
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jq-ui的Sortable插件 两列布局 左右拖拽
举报原因:
原因补充:

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