html5拖拽状态,html5中的拖拽功能

Document

* {

padding: 0;

margin: 0;

}

.div1,

.div2,

.div3 {

margin: 0 20px;

float: left;

width: 200px;

height: 200px;

border: 1px solid #000;

}

div{

display: flex;

flex-direction: column;

align-items: center

}

p{

display: flex;

flex-direction: column;

align-items: center

}

.p1 {

width: 50px;

background-color: pink;

margin: 5px 0;

}

.p2 {

width: 80px;

background-color: burlywood;

margin: 5px 0;

}

.p3 {

width: 110px;

background-color: rgb(133, 88, 29);

margin: 5px 0;

}

.p4 {

width: 140px;

background-color: rgb(172, 37, 48);

margin: 5px 0;

}

.p5 {

width: 170px;

background-color: rgb(17, 182, 31);

margin: 5px 0;

}

.p6 {

width: 200px;

background-color: rgb(90, 33, 155);

margin: 5px 0;

}

3

2

5

1

6

4

/* 拖拽元素支持的事件

ondrag 应用于拖拽元素，整个拖拽过程都会调用

ondragstart 应用于拖拽元素，当拖拽开始时调用

ondragleave 应用于拖拽元素，当鼠标离开拖拽元素是调用

ondragend 应用于拖拽元素，当拖拽结束时调用

目标元素支持的事件

ondragenter 应用于目标元素，当拖拽元素进入时调用

ondragover 应用于目标元素，当停留在目标元素上时调用

ondrop 应用于目标元素，当在目标元素上松开鼠标时调用

ondragleave 应用于目标元素，当鼠标离开目标元素时调用

*/

// var obj = null; /* 当前被拖拽的值*/

document.ondragstart = function (e) {

/*通过dataTransfer来实现数据的存储与获取

setData(format, data)

format: 数据的类型： text/html text/uri-list

Data: 数据： 一般来说是字符串值

*/

// e.dataTransfer.setData("Text", e.target.id);

e.target.style.opacity = 0.5

e.dataTransfer.setData("text", e.target.id);

console.log(e.target.id)

}

document.ondragend = function (e) {

e.target.style.opacity = 1;

}

/*浏览器默认会阻止ondrop事件：我们必须在ondrapover中阻止默认行为*/

document.ondragover = function (e) {

e.preventDefault();

}

document.ondrop = function (e) {

/*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/

var data = e.dataTransfer.getData("text");

e.target.appendChild(document.getElementById(data));

}