HTML5拖拽详解及vue-grid-layout插件使用

拖拽API

ondragstart	在拖动操作开始时执行脚本（开始拖动）	被拖拽元素
ondrag	只要对象在被拖动就执行脚本（正在拖动）	被拖拽元素
ondragend	在拖动操作结束时执行脚本（拖动结束）	被拖拽元素
ondragenter	在被拖放元素进入放置目标时触发（进入）	目标元素
ondragover	只要对象正在放置目标上拖动时就执行脚本（移动）	目标元素
ondragleave	在被拖放元素离开目标元素时触发（离开）	目标元素
ondrop	将被拖拽元素放到目标元素内时执行脚本（完全）	目标元素

基本使用：

1、设置元素可拖动

为了使元素可拖动，把 draggable 属性设置为 true

2、拖动什么 - ondragstart 和 setData()

规定当元素被拖动时，会发生什么。ondragstart 属性调用一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值。

function drag(ev){
   ev.dataTransfer.setData("Text",ev.target.id);
}// 数据类型是 "Text"，值是可拖动元素的 id ("drag1")

3、放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

function allowDrop(ev){
   ev.preventDefault();
}

4、进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

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")
• 把被拖元素追加到放置元素（目标元素）中

注：1、最好不要绑定ondragover事件，因为在拖动的过程中不断触发，对于浏览器的负担很大

       2、drag系列事件不能跟mousemove共存，只能取其一

       3、保存在dataTransfer对象中的数据只能在drop事件处理程序中读取

       4、使用 setDragImage 方法设置拖放图标，在HTML5中，一个元素在被拖放时，还可以自定义拖放元素的鼠标图标。调用格 式如下：setDragImage(Element img,long x,long y);img表示拖放时的 <> 元素的图标，x 表示图标距离鼠标指针的x轴方向的偏移值，y表示图标距离鼠标指针y轴方向的偏移值。

使用 effectAllowed 和 dropEffect 属性设置拖放效果

dataTransfer对象的两个属性：dropEffect和effectAllowed，能通过它来确定被拖动的元素以及作为放置目标的元素能够接受什么操作。结合effectAllowed 和 dropEffect 这两个属性，可以自定义拖放过程中的效果。effectAllowed属性作用于被拖放元素；而 dropEffect 属性作用于目标元素，

其中，通过dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值。

• none：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
• move：应该把拖动的元素移动到放置目标
• copy：应该把拖动的元素复制到放置目标
• link：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）。

在把元素拖动到放置目标上时，以上每一个值都会导致光标显示为不同的符号。然而，要怎样实现光标所指示的动作完全取决于自己。换句话说，如果你不介入，没有什么会自动地移动、复制，也不会打开链接。总之，浏览器只能帮你改变光标的样式，而其它的都要靠自己来实现。要使用dropEfect属性，必须在ondraggenter事件处理程序中针对放置目标来设置它。

dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖放元素的哪种dropEffect，effectAllowed属性可能的值如下。

1. uninitialized：没有该被拖动元素放置行为。
2. none：被拖动的元素不能有任何行为。
3. copy：只允许值为“copy”的dropEffect。
4. link：只允许值为“link”的dropEffect。
5. move：只允许值为“move”的dropEffect。
6. copyLink：允许值为“copy”和“link”的dropEffect。
7. copyMove：允许值为“copy”和”link”的dropEffect。
8. linkMove：允许职位“link”和”move”的dropEffect。
9. all：允许任意dropEffect。

必须在ondraggstart事件处理程序中设置effectAllowed属性。

假设你想允许用户把文本框中的文本拖放到一个

元素中。首先，必须将dropEffect和effectAllowed设置为”move”。但是，由于

元素的放置事件的默认行为是什么也不做，所以文本不可能自动移动。重写这个默认行为，就能从文本框中移走文本。然后你就可以自己编写代码将文本插入到

中，这样整个拖放操作就完成了。如果将dropEffect和effectAllowed的值设置为”copy”，那就不会自动移走文本框中的文本。     

vue-grid-layout插件使用

Vue-grid-layout缺陷:
没有下边界，发生碰撞的时候块会无限的往下移动

参数	类型	默认值	说明
auto-size	Boolean	true	是否根据内容确定容器的高度
col-num	Number	12	列数
row-height	Number	150	行高
max-rows	Number	Infinity	最大的行高
margin	Array	[10, 10]	两个可移动元素间的距离
is-draggable	Boolean	true	是否支持推拽
is-resizable	Boolean	true	是否支持改变大小
use-css-transforms	Boolean	true	是否使用css的transforms的自定义的过渡效果
vertical-compact	Boolean	true	是否使用verticalCompact布局,垂直紧凑布局 就是拖动留空了 若下方有块会自动往上补
layout	Array	-	布局位置

 现在的效果是当你移动一个box时 即使你没松开鼠标 每一个被你移动中碰撞到的box都会发生改变 这可能不是我们想要的 可以创建一个historyLayout 拿来记录我们上一步的布局 我们在watchitem()里比较 如果不是当前操作的box 使其的位置保持不变，在moved()中调用一个调整位置的函数 使其可以达到 两两调换的效果 以及其他的移动效果 想了解的可以点击这里