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 双向数据绑定拖拽的功能的主要内容，如果未能解决你的问题，请参考以下文章