基于h5+ angularjs页面拖拽实现

用户5166330

发布于 2019-04-16 16:56:24

1.5K0

发布于 2019-04-16 16:56:24

文章被收录于专栏：帅哥哥写代码帅哥哥写代码

背景

一个朋友想做一个页面拖拽功能，我去百度一哈，找到一些资料。但是看了半天没看明白。感觉写的比较麻烦。我就反手百度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();