sortablejs实现两个列表之间的相互拖拽

最新推荐文章于 2024-05-08 17:04:32 发布

frank_hehe

最新推荐文章于 2024-05-08 17:04:32 发布

阅读量2.9k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/frank_hehe/article/details/103353127

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
  <script src="Sortable.js"></script>
  <script src="angular-legacy-sortable.js"></script>
</head>
<style>
  ul {min-height: 50px;background: red}
  li{height: 50px;line-height: 50px;background: green;margin: 10px;color: #fff}
  .sort-handle1,.sort-handle2{
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #000;
  }
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul ng-sortable="sortOptions1">
    <li  ng-repeat=" fi in first">
      <span class="sort-handle1">拖动</span>
      {{fi}}
    </li>
  </ul>
  <hr>
  <ul ng-sortable="sortOptions2">
    <li  ng-repeat=" la in last">
      <span class="sort-handle2">拖动</span>
      {{la}}
    </li>
  </ul>
</div>

二、javascript

var app = angular.module('myApp', ['ng-sortable']);
  app.controller('myCtrl', function($scope,$timeout) {
    $scope.first= [1,2,3,4];
    $scope.last= [5,6,7,8];
    var maximum = 6; //线上列表最大值
    var minimum = 2; //线上列表最小值
    //用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出
    var pull0ptions1 = function () {
      var len = $scope.first.length;
      if(len > minimum){
        return true
      }else{
        console.log('线上列表至少有'+minimum+'个');
        return false;
      }
    };
    //用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入
    var put0ptions1 = function () {
      var len = $scope.first.length;
      if(len < maximum){
        return true
      }else{
        console.log('线上列表不能超过'+maximum+'个')
        return false;
      }
    };
    $scope.sortOptions1 = {
      group: {name:'name',pull:pull0ptions1,put:put0ptions1},
      handle: '.sort-handle1',
      setData: function (dataTransfer, dragEl) {
        dataTransfer.setData('data', dragEl.textContent);
      },
      onUpdate: function (evt) {
        console.log('update1')
      },
      onAdd: function (/**Event*/evt) {
        // same properties as onEnd
        console.log('add1')
      },
      onRemove :function () {
        console.log('onRemove1')
      }
    }
    $scope.sortOptions2 = {
      group: 'name',//两个列表之间可以相互拖拽必须有相同的group
      handle: '.sort-handle2',  格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动
      setData: function (dataTransfer, dragEl) {
        dataTransfer.setData('data', dragEl.textContent);
      },
      onUpdate: function (evt) {
        console.log('update2')
      },
      onAdd: function (/**Event*/evt) {
        console.log('add2')
        console.log(evt)
      },
      onRemove :function () {
        console.log('onRemove2')
      }
    }
  });

frank_hehe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sortablejs实现两个列表之间的相互拖拽

一、HTML<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> <script src=...
复制链接

扫一扫