基于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荡下来,只需绑定自己的初始化图片数据就可以实现功能。顶多再改改样式。

结语

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券