angular-dragon-drop.js 双向数据绑定拖拽的功能

Posted changYao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angular-dragon-drop.js 双向数据绑定拖拽的功能相关的知识,希望对你有一定的参考价值。

   在做公司后台物流的时候,涉及到34个省市分为两个部分,一部分为配送区域,另一部分为非配送区域,想利用拖拽的功能来实现,最好两部分的数组能自动更新。

刚好找到angular-dragon-drop.js 插件来实现。通过拖拽可以自动更新数组元素。 

 

// 比如
<script>
    var arr1=[{name:‘wang‘,id:11,city:‘beijing‘},{name:‘chang‘,id:22,‘hangzhou‘}];
    var arr2=[];
</script>
//arr1为配送区域 arr2为非配送区域

  通过插件拖拽会将arr1中的元素即{name:‘wang‘,id:11,city:‘beijing‘}对象放进arr2中,会自动更新数据。

      

<!DOCTYPE html>
<html>
<head>
  <title>Dragon Drop for AngularJS</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
  <style>
    [btf-dragon] {
      padding: 20px;
      border: 1px solid red;
    }
  </style>
</head>
<body ng-app="ExampleApp">

  <div class="container" ng-controller="MainCtrl">
    
    <div class="row">
      <h1>Dragon Drop Example</h1>
    </div>
    
    <hr>
  
    <div class="row">
      <div class="span6">
        <h3>Things</h3>
        <div btf-dragon="thing in things">
        	<div style=‘width:40px;height:40px;background-color:blue;margin-bottom: 10px;‘>
        		{{thing}}
        	</div>
        </div>
      </div>
      <div class="span6" >
        <h3>Other Things</h3>
        <div btf-dragon="thing in otherThings" style=‘height:300px;‘>
        	<div style=‘width:40px;height:40px;background-color:blue;margin-bottom: 10px;‘>
        		{{thing}}
        	</div></div>
      </div>
    </div>
    
    <hr>

    <div class="row">
      <div class="span6">
        <h3>Things</h3>
        <pre>{{things | json}}</pre>
      </div>
      <div class="span6">
        <h3>Other Things</h3>
        <pre>{{otherThings | json}}</pre>
      </div>
    </div>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script src="dragon-drop.js"></script>
  <script>
    angular.module(‘ExampleApp‘, [‘btford.dragon-drop‘]).
      controller(‘MainCtrl‘, function ($scope) {
        $scope.things = [‘one‘, ‘two‘, ‘three‘];
        $scope.otherThings = [];
      });
  </script>
</body>
</html>

  

 

以上是关于angular-dragon-drop.js 双向数据绑定拖拽的功能的主要内容,如果未能解决你的问题,请参考以下文章

带头节点的双向链表

双向bfs和双向dfs

Vue3的双向绑定是如何实现的

双向链表的原理与实现

数据结构之带头结点的循环双向链表详细图片+文字讲解

链表-双向链表