在做公司后台物流的时候,涉及到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>
时间: 2024-10-28 04:05:53