zoukankan      html  css  js  c++  java
  • ng-sortable-支持触屏的拖拽排序

    1.首先是到https://github.com/a5hik/ng-sortable/tree/master/dist下载所需的文件:ng-sortable.min.js,ng-sortable.css,ng-sortable.style.css,并引用在项目中;

    2.注入sortable的依赖项:angular.module('xyzApp', ['as.sortable', '....']);

    3.用法:

    <ul data-ng-model="data.topicContentList" as-sortable="dragControlListeners">
      <li class="setFontSize" ng-repeat="topicContent in data.topicContentList"
           style=" height:45px; list-style-type: none; cursor: move; clear: both; padding: 10px; margin-right: 20px;"
           as-sortable-item>
        <div style=" 30px; float: left;">
          <i class="glyphicon glyphicon-move" as-sortable-item-handle></i>
        </div>
      </li>
    </ul>

    data.topicContentList是我们要显示的内容的数组列表;

    dragControlListeners是一个排序函数:

    $scope.dragControlListeners = {
        // triggered when item order is changed with in the same column (what happens here)
        orderChanged: function (event) {
        // 排序操作
      }
    }
    

    4.在控制器中还可以定义其他的回调函数:

    $scope.dragControlListeners = {
        accept: function (sourceItemHandleScope, destSortableScope) {return boolean}//override to determine drag is allowed or not. default is true.
        itemMoved: function (event) {//Do what you want},
        orderChanged: function(event) {//Do what you want},
        containment: '#board'//optional param.
        clone: true //optional param for clone feature.
        allowDuplicates: false //optional param allows duplicates to be dropped.
    };
    
    $scope.dragControlListeners1 = {
            containment: '#board'//optional param.
            allowDuplicates: true //optional param allows duplicates to be dropped.
    };
    
  • 相关阅读:
    C#中的正则表达式(1)
    sql link
    Repeater控件绑定数据、分页、数据操作,最佳代码
    存储过程事物
    sql db link string
    存储过程返回值
    net打包
    excel c# 输出
    常用的js验证数字,电话号码,传真,邮箱,手机号码,邮编,日期
    sql 大全
  • 原文地址:https://www.cnblogs.com/maoyazhi/p/5718421.html
Copyright © 2011-2022 走看看