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>

  

时间: 2024-10-28 04:05:53

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

js实现鼠标拖拽div-------Day44

如果去问这样一个问题"你觉得鼠标操作简单,还是键盘操作简单",相信会有多数人都会回答鼠标吧,毕竟键盘按钮那么多,如果手小了或者手法不规范了,太容易出问题了,也对操作的速度和有效性是大大的降低了,当然不可否认,会有那么一批人,操作起键盘来完全可以忽略鼠标的,但这些都应该是骨灰级别的了吧,起码我现在的层次还接触不到,只能向往. 然而,当面对这么一个问题时,我突然有点纠结,因为毕竟以前我也是那么想的,但是这次开发让我是大跌眼镜,键盘操作我在开发中,我只能判定其按键是否按键,然后根据不同按键进

JS Event 鼠标拖拽事件

<!DOCTYPE html><html> <head>        <meta charset="UTF-8">        <title>JS Event鼠标拖拽事件</title>                <style>            #box{width:200px;height:200px;background:#000;position:absolute;}       

JS打造的拖拽翻页效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js实现鼠标拖拽多选功能

最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo:遮罩出现:被遮罩盖住的,即为选中的块(背景色为粉色)下面是具体代码,注释已在文中,与大家交流. <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">

纯js实现DIV拖拽

写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但发现这段代码使用前必须设置top和left样式属性,否则拖动时div会有跳动,而且不支持多个div的拖动.于是对代码大概修改了一番,贴在这里,以备后用,希望大神勿怪. var startDrag = function(bar, target, callback) { (function(bar, target

Angular JS - 3 - Angular JS 双向数据绑定

一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从Model流向View 视图(View): 也就是我们的页面(主要是Andular指令和表达式) 模型(Model) : 作用域对象(当前为$rootScope), 它可以包含一些属性或方法 当改变View中的数据, Model对象的对应属性也会随之改变: ng-model指令 数据从View==>

js实现可拖拽的div

实现一个div可以被拖拽,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>zzw_drap</title> <style> * { margin: 0; padding: 0; } #box { position: absolute; top: 100px; left: 200

js可以随意拖拽的div的实现

最近花了点时间用纯JS写了一个扫雷程序,写出来效果很差,自己长时间使用面向过程的方式编写代码,写的程序到后面都乱了,有必要找时间好好的深入理解一下OOP了.有时间会把写的东西拿上来.就当是留个纪念吧.打算用OOP重新写个扫雷程序,希望令自己满意. ——————————————碎碎念 记录一个实现随意拖拽div的实现方法,当作备忘吧,指不定什么时候用到了呢. <!DOCTYPE html> <html lang="en"> <head> <met

js插件-简单拖拽

前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title&g