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>

　dragon-drop.js

/**

 * angular-drag-and-drop-lists v2.1.0

 *

 * Copyright (c) 2014 Marcel Juenemann marcel@juenemann.cc

 * Copyright (c) 2014-2017 Google Inc.

 * https://github.com/marceljuenemann/angular-drag-and-drop-lists

 *

 * License: MIT

 */

!function(e){function n(e,n){return"all"==n?e:e.filter(function(e){return-1!=n.toLowerCase().indexOf(e)})}var a="application/x-dnd",r="application/json",t="Text",d=["move","copy","link"]

e.directive("dndDraggable",["$parse","$timeout",function(e,i){return function(l,f,c){f.attr("draggable","true"),c.dndDisableIf&&l.$watch(c.dndDisableIf,function(e){f.attr("draggable",!e)}),f.on("dragstart",function(s){if(s=s.originalEvent||s,"false"==f.attr("draggable"))return!0

o.isDragging=!0,o.itemType=c.dndType&&l.$eval(c.dndType).toLowerCase(),o.dropEffect="none",o.effectAllowed=c.dndEffectAllowed||d[0],s.dataTransfer.effectAllowed=o.effectAllowed

var g=l.$eval(c.dndDraggable),u=a+(o.itemType?"-"+o.itemType:"")

try{s.dataTransfer.setData(u,angular.toJson(g))}catch(p){var v=angular.toJson({item:g,type:o.itemType})

try{s.dataTransfer.setData(r,v)}catch(p){var D=n(d,o.effectAllowed)

s.dataTransfer.effectAllowed=D[0],s.dataTransfer.setData(t,v)}}if(f.addClass("dndDragging"),i(function(){f.addClass("dndDraggingSource")},0),s._dndHandle&&s.dataTransfer.setDragImage&&s.dataTransfer.setDragImage(f[0],0,0),e(c.dndDragstart)(l,{event:s}),c.dndCallback){var y=e(c.dndCallback)

o.callback=function(e){return y(l,e||{})}}s.stopPropagation()}),f.on("dragend",function(n){n=n.originalEvent||n,l.$apply(function(){var a=o.dropEffect,r={copy:"dndCopied",link:"dndLinked",move:"dndMoved",none:"dndCanceled"}

e(c[r[a]])(l,{event:n}),e(c.dndDragend)(l,{event:n,dropEffect:a})}),o.isDragging=!1,o.callback=void 0,f.removeClass("dndDragging"),f.removeClass("dndDraggingSource"),n.stopPropagation(),i(function(){f.removeClass("dndDraggingSource")},0)}),f.on("click",function(n){c.dndSelected&&(n=n.originalEvent||n,l.$apply(function(){e(c.dndSelected)(l,{event:n})}),n.stopPropagation())}),f.on("selectstart",function(){this.dragDrop&&this.dragDrop()})}}]),e.directive("dndList",["$parse",function(e){return function(i,l,f){function c(e){if(!e)return t

for(var n=0;n<e.length;n++)if(e[n]==t||e[n]==r||e[n].substr(0,a.length)==a)return e[n]

return null}function s(e){return o.isDragging?o.itemType||void 0:e==t||e==r?null:e&&e.substr(a.length+1)||void 0}function g(e){return E.disabled?!1:E.externalSources||o.isDragging?E.allowedTypes&&null!==e?e&&-1!=E.allowedTypes.indexOf(e):!0:!1}function u(e,a){var r=d

return a||(r=n(r,e.dataTransfer.effectAllowed)),o.isDragging&&(r=n(r,o.effectAllowed)),f.dndEffectAllowed&&(r=n(r,f.dndEffectAllowed)),r.length?e.ctrlKey&&-1!=r.indexOf("copy")?"copy":e.altKey&&-1!=r.indexOf("link")?"link":r[0]:"none"}function p(){return T.remove(),l.removeClass("dndDragover"),!0}function v(n,a,r,t,d,l){return e(n)(i,{callback:o.callback,dropEffect:r,event:a,external:!o.isDragging,index:void 0!==d?d:D(),item:l||void 0,type:t})}function D(){return Array.prototype.indexOf.call(m.children,h)}function y(){var e

return angular.forEach(l.children(),function(n){var a=angular.element(n)

a.hasClass("dndPlaceholder")&&(e=a)}),e||angular.element("<li class='dndPlaceholder'></li>")}var T=y()

T.remove()

var h=T[0],m=l[0],E={}

l.on("dragenter",function(e){e=e.originalEvent||e

var n=f.dndAllowedTypes&&i.$eval(f.dndAllowedTypes)

E={allowedTypes:angular.isArray(n)&&n.join("|").toLowerCase().split("|"),disabled:f.dndDisableIf&&i.$eval(f.dndDisableIf),externalSources:f.dndExternalSources&&i.$eval(f.dndExternalSources),horizontal:f.dndHorizontalList&&i.$eval(f.dndHorizontalList)}

var a=c(e.dataTransfer.types)

return a&&g(s(a))?void e.preventDefault():!0}),l.on("dragover",function(e){e=e.originalEvent||e

var n=c(e.dataTransfer.types),a=s(n)

if(!n||!g(a))return!0

if(h.parentNode!=m&&l.append(T),e.target!=m){for(var r=e.target;r.parentNode!=m&&r.parentNode;)r=r.parentNode

if(r.parentNode==m&&r!=h){var d=r.getBoundingClientRect()

if(E.horizontal)var o=e.clientX<d.left+d.width/2

else var o=e.clientY<d.top+d.height/2

m.insertBefore(h,o?r:r.nextSibling)}}var i=n==t,D=u(e,i)

return"none"==D?p():f.dndDragover&&!v(f.dndDragover,e,D,a)?p():(e.preventDefault(),i||(e.dataTransfer.dropEffect=D),l.addClass("dndDragover"),e.stopPropagation(),!1)}),l.on("drop",function(e){e=e.originalEvent||e

var n=c(e.dataTransfer.types),a=s(n)

if(!n||!g(a))return!0

e.preventDefault()

try{var d=JSON.parse(e.dataTransfer.getData(n))}catch(l){return p()}if((n==t||n==r)&&(a=d.type||void 0,d=d.item,!g(a)))return p()

var y=n==t,T=u(e,y)

if("none"==T)return p()

var h=D()

return f.dndDrop&&(d=v(f.dndDrop,e,T,a,h,d),!d)?p():(o.dropEffect=T,y||(e.dataTransfer.dropEffect=T),d!==!0&&i.$apply(function(){i.$eval(f.dndList).splice(h,0,d)}),v(f.dndInserted,e,T,a,h,d),p(),e.stopPropagation(),!1)}),l.on("dragleave",function(e){e=e.originalEvent||e

var n=document.elementFromPoint(e.clientX,e.clientY)

m.contains(n)&&!e._dndPhShown?e._dndPhShown=!0:p()})}}]),e.directive("dndNodrag",function(){return function(e,n,a){n.attr("draggable","true"),n.on("dragstart",function(e){e=e.originalEvent||e,e._dndHandle||(e.dataTransfer.types&&e.dataTransfer.types.length||e.preventDefault(),e.stopPropagation())}),n.on("dragend",function(e){e=e.originalEvent||e,e._dndHandle||e.stopPropagation()})}}),e.directive("dndHandle",function(){return function(e,n,a){n.attr("draggable","true"),n.on("dragstart dragend",function(e){e=e.originalEvent||e,e._dndHandle=!0})}})

var o={}}(angular.module("dndLists",[]));

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

纯js实现DIV拖拽
写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
RecyclerViewItemTouchHelperDemo【使用ItemTouchHelper进行拖拽排序功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图代码分析 ItemTouchHel ...
Angular JS - 3 - Angular JS 双向数据绑定
一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...
根据HTML5的新方法 drag & drop 方法实现表格拖拽实例
上一次学习了html5的drag和drop方法,传送门就自己写了个例子加深自己对drag和drop的理解.不过一开始不是很简单,遇到了不少问题.还好网络万能的,什么都能查到,总算完成了. 说明和详 ...
Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
js实现可拖拽的div
前言下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...
纯JS实现可拖拽表单
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...

随机推荐

arcgis api for js实现克里金插值渲染图--不依赖GP服务
本篇的亮点是利用kriging.js结合arcgis api for js,实现克里金插值渲染图,截图如下: 具体实现的思路如下: 1.kriging.js开源js,可以实现针对容器canvas克里金 ...
HNOI 2012 矿场搭建
#include<iostream> #include<cstdio> #include<cstdlib> #include<cstring> #def ...
MySQL 权限与用户表
1.授权时创建用户 grant all privileges on *.* to zhengwenqiang@localhost identified by 'zhengwenqiang'; 2.收回 ...
[HNOI2008]Cards
题目描述小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案. 进一步,小春要求染出Sr张红色,Sb张蓝 ...
JAVA NIO学习四：Path&Paths&Files 学习
今天我们将学习NIO 的最后一章,前面大部分涉及IO 和 NIO 的知识都已经讲过了,那么本章将要讲解的是关于Path 以及Paths 和 Files 相关的知识点,以对前面知识点的补充,好了言归正传 ...
e.target和this的区别
```e.target与this的区别 event.target表示发生点击事件的元素this表示注册点击事件的元素 this 等于 e.currentTarget 指的是现在的目标this是所有原生 ...
Vue 爬坑之路（八）—— 使用 Echarts 创建图表
在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件使用 c ...
ABP架构学习系列三：手工搭建ABP框架
由于公司的项目才接触到ABP这个框架,当时就觉得高大上,什么IOC.AOP.ddd各种专业词汇让人激情澎湃,但在使用过程中碰到了许多坑,可能也许是没有去看源码导致的,但工作确实没有那么多时间让人去慢 ...
angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法
在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...
基于IndexedDB实现简单文件系统
现在的indexedDB已经有几个成熟的库了,比如西面这几个,任何一个都是非常出色的. 用别人的东西好处是上手快,看文档就好,要是文档不太好,那就有点尴尬了. dexie.js :A Minimali ...

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

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

随机推荐

热门专题