背景
一个朋友想做一个页面拖拽功能，我去百度一哈，找到一些资料。但是看了半天没看明白。感觉写的比较麻烦。我就反手百度h5拖放，发现h5已经提供一些拖放事件，于是自己反手写了一个。以此为笔记记录。
正题
1.h5提供的拖放事件
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：<img draggable="true" />
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中以上内容来源于W3school
2.整合angular
有时候不得不说前端的一些框架真的方便。
比如我想要绘制如下的图片：
我只是一张图片
只需要如下一丁点代码就可以实现：
<div id="div1" ondrop="drop(event,this)" ondragover="allowDrop(event)" ng-repeat="x in images"> <img src={{x.src}} draggable="true" ondragstart="drag(event,this)" id={{x.id}} /> </div>扯回来:
首先第一步，引入<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>第二步就是定义一个存放数组
$scope.images = [{id:1,src:'image/0.jpg'},{id:2,src:'image/2.jpg'},{id:3,src:'image/3.jpg'},{id:4,src:'image/4.jpg'},{id:5,src:'image/6.png'},{id:6,src:'image/7.jpg'}]第三步：照抄h5的拖放事件函数
function allowDrop(ev) { ev.preventDefault(); } function drag(ev,source) { ev.dataTransfer.setData("src",source.src); ev.dataTransfer.setData("id",source.id); } function drop(ev,target) { ev.preventDefault(); var sSrc=ev.dataTransfer.getData("src"); var sId=ev.dataTransfer.getData("id"); var tSrc=target.children[0].src; var tId=target.children[0].id; $scope.chanage(sId,sSrc,tId,tSrc) $scope.$apply(); }第四步：定义函数，修改图片数组顺序（angualr最好用的地方之一就是双向绑定。所以只需要操作图片数组的顺序就可以实现页面上交换图片位置）。
$scope.chanage = function (sId,sSrc,tId,tSrc){ for(var obj of $scope.images){ if(obj.id ==tId) { obj.src = sSrc continue; } if(obj.id ==sId){ obj.src = tSrc continue; } } }
到此就算实现功能。
本文注意点
1.js的事件函数如何调用定义在angularjs中的函数?
答：var appElement = document.querySelector('[ng-controller=myCtrl]'); //获取$scope变量 $scope = angular.element(appElement).scope();获取到$scope我们就可以想干啥干啥了
2.当改变了数组数据时，如何使页面动态更新？
答：$scope.$apply();
看一波效果
我是个动图
不足
应该发布到npm上，然后留下一个绑定初始化图片数组的口子。这样大家从npm荡下来，只需绑定自己的初始化图片数据就可以实现功能。顶多再改改样式。
结语
不要因为简单而放弃动手的机会。都是赤裸裸的经验。欢迎点亮小星星。
