# drag
**Repository Path**: frontstudio/drag
## Basic Information
- **Project Name**: drag
- **Description**: html5 drag拖放实现两个div互换
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-04-06
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# drag
html5 drag拖放实现两个div互换
> 本文首发于我的个人博客:http://cherryblog.site/ ，欢迎大家前去参观
> 本文项目地址，sortable插件地址：https://github.com/sunshine940326/sortable
> demo地址：https://github.com/sunshine940326/drag
在写我们后台的管理程序中需要有一个拖放的功能，然后我们有一个这样的功能，实现11个固定且大小不一的div互换，效果如下
作为一个小菜鸟，听到这样的消息我是蒙逼的= =，在网上找到一个插件，功能挺强大的
> 插件地址：https://github.com/sunshine940326/sortable
但是这个插件只能拖动和放置，不能交换，也就是只能将div插入在其他div前面，其余的向后推移，并且不能做到交换div中的内容，而div容器不变的条件，然后我就和其他同事商量了一下交换两个div中的数据要怎么处理，然后同事说这个就比较麻烦了= =。需要写死div，然后先记录鼠标拖动前的div中的内容，然后判断鼠标放下的位置，在哪一个div的范围内，再交换两个的数据= =，真正做起来还不知道有什么坑。听着都怕，于是就暂且搁置了这个功能，直到有一天非做不可了，我百度了一下“怎么交换两个div”，然后找到了一个demo，天啦噜~整个实现过程全部代码50行不到，js代码之后十几行，整个过程不到半个小时就解决了，*★,°*:.☆\(￣▽￣)/$:*.°★*。撒花！效果如下：
> demo地址：https://github.com/sunshine940326/drag
查看代码，发现思路如下:
1. ondragstart（ 用户开始拖动元素时触发）的时候使用该对象的dataTransfer.setData方法，并且用中间量记录点击的div
2. ondragover (当某被拖动的对象在另一对象容器范围内拖动时触发此事件),拖动div的时候阻止拖动的默认事件（drop 事件的默认行为是以链接形式打开）
3. ondrop (在一个拖动过程中，释放鼠标键时触发此事件)时候交换两个div的html
百度了一下发现这是html的新特性drag，研究了一下有如下特点
# 拖放
本例的代码如下
```
```
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
## 设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
``
## 设置ondragstart 和并保存数据
ondragstart 属性调用了一个函数，drag(event,this)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值,在这个例子中，数据类型是 "text/html"，值是可拖动元素的innerHTML
```
function drag(ev,divdom){
srcdiv=divdom;
ev.dataTransfer.setData("text/html",divdom.innerHTML);
}
```
## 放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
```
function allowDrop(ev){
ev.preventDefault();
}
```
## 进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
```
function drop(ev,divdom){
ev.preventDefault();
if(srcdiv != divdom){
srcdiv.innerHTML = divdom.innerHTML;
divdom.innerHTML=ev.dataTransfer.getData("text/html");
}
}
```