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.
    };
    
  • 相关阅读:
    TreeView控件
    俄罗斯套娃
    c#文件操作
    c# 操作excle
    vs2010启动越来越慢解决方法
    c# 操作excle[转]
    c# 命名空间别名
    C# openfiledialog的使用
    c# 获取项目根目录方法
    jquery操作复选框(checkbox)的12个小技巧总结
  • 原文地址:https://www.cnblogs.com/maoyazhi/p/5718421.html
Copyright © 2011-2022 走看看