基于h5+ angularjs页面拖拽实现

背景

一个朋友想做一个页面拖拽功能，我去百度一哈，找到一些资料。但是看了半天没看明白。感觉写的比较麻烦。我就反手百度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荡下来，只需绑定自己的初始化图片数据就可以实现功能。顶多再改改样式。

结语

不要因为简单而放弃动手的机会。都是赤裸裸的经验。欢迎点亮小星星。