WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
拖动排序 wui.dragsort

依赖加载模块:dragsort

dragsort 的使用非常简单,通过简单的配置即可实现您想要的功能,如下是一个最基本的例子(您可以试着拖动下面颜色条):


  • 赤色
  • 橙色
  • 墨绿
  • 藏青
  • 蓝色
  • 雅黑
  • 银灰

下面是HTML代码:

<ul id='list1'>
    <li class="wui-bg-red">赤色</li>
    <li class="wui-bg-orange">橙色</li>
    <li class="wui-bg-green">墨绿</li>
    <li class="wui-bg-cyan">藏青</li>
    <li class="wui-bg-blue">蓝色</li>
    <li class="wui-bg-black">雅黑</li>
    <li class="wui-bg-gray">银灰</li>
</ul>

下面是JavaScript代码:

<script type="text/javascript">
    wui.use('dragsort', function(){
        wui.dragsort({
            elem: "#list1"
        });
    });
</script>

上述是一个比较简单的例子,以下是信息流完整的参数支撑(即options对象),它们将有助于你更灵活地应对各种场景

参数选项 说明 默认值
elem 指向容器选择器。 #drag
dragSelector 列表项中元素的CSS选择器,用作拖动句柄。 当前列表内部的第一个元素,如 LI
dragSelectorExclude 指定不触发 dragsort 事件的元素,支持 .Class 和 #id 选择器。 -
dragEnd dragsort 事件结束后的回调函数(仅当列表顺序已更改时调用)。 -
dragBetween 如果要启用在多个列表之间拖动,或允许将列表项拖动到列表之外以进行自动滚动,请设置为“true”。 false
placeHolderTemplate 拖动项的占位符的html。 当前列表内部的第一个元素。
如:<li></li>
scrollContainer 用作滚动容器的元素的css选择器,例如溢出设置为auto的div。 window
scrollSpeed 一个数字,表示当将项目拖到滚动容器外时,页面将滚动的速度,越高的值越快,越低的值越慢。设置为0以禁用滚动。 5

下面我们示例一个带回调函数的 dragsort 。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
排序结果

下面是HTML代码:

<ul id="list2">
    <li><div>1</div></li>
    ... ...
    <li><div>18</div></li>
</ul>

排序结果
<input type="text" name="listSortOrder">

下面是JavaScript代码:

<script type="text/javascript">
    wui.use('dragsort', function(){
        wui.dragsort({
            elem: "#list2",
            dragEnd:saveOrder
        });

        function saveOrder() {
            var data = $("#list2 div").map(function(){
                return $(this).text();
            }).get();
            $("input[name=listSortOrder]").val(data.join("|"));
        };
    });
</script>

再来一个支持多列表间拖动的 dragsort 。


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12,禁此移动
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

下面是HTML代码:

<ul id="list3">
    <li><div>1</div></li>
    <li><div>2</div></li>
    <li><div>3</div></li>
    <li><div>4</div></li>
    <li><div>5</div></li>
    <li><div>6</div></li>
    <li><div>7</div></li>
    <li><div>8</div></li>
    <li><div>9</div></li>
</ul>
<ul id="list4">
    <li><div>10</div></li>
    <li><div>11</div></li>
    <li id="nomove"><div class="wui-bg-orange">12,禁此移动</div></li>
    <li><div>13</div></li>
    <li><div>14</div></li>
    <li><div>15</div></li>
    <li><div>16</div></li>
    <li><div>17</div></li>
    <li><div>18</div></li>
</ul>

<style type="text/css">
    .placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
</style>

下面是JavaScript代码:

<script type="text/javascript">
    wui.use('dragsort', function(){
        wui.dragsort({
            elem: "#list3,#list4",              //支持两个列表之间排序
            dragBetween: true,                  //支持多个列表之间拖动排序时需设置
            dragSelectorExclude:'#nomove',      //指定 #nomove 元素不可拖拽
            placeHolderTemplate: "<li class='placeHolder'><div></div></li>"    //设定拖动项的占位符,配合 CSS 支持
        });
    });
</script>
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile