尧尧神教
尧尧神教
11天前 · 0 人阅读
背景

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