html5拖放实现方式,HTML5实现简单的拖放功能

使用HTML5实现简单的拖放功能：

1.对象元素的draggable属性设置为true(draggable="true")。还需要注意的是a元素和img元素必须指定href；

2.编写拖拽有关的事件处理代码：

事件

产生事件的元素

描述

dragstart

被拖放的元素

开始拖放操作

drag

被拖放的元素

拖放过程中

dragenter

拖放过程中鼠标经过的元素

被拖放的元素开始进入本元素的范围之内

dragover

拖放过程中鼠标经过的元素

被拖放的元素正在本元素范围内移动

dragleave

拖放过程中鼠标经过的元素

被拖放的元素离开本元素的范围

drop

拖放的目标元素

其他元素被拖放到了本元素中

dragend

拖放的对象元素

拖放操作结束

3.案例实现代码：

(1)HTML代码段：

(2)CSS代码段：

#tuo{

width: 540px;

height: 320px;

background: #e54d26;

}

#cun{

width: 540px;

height: 320px;

border: 2px solid #d2d2d2;

box-shadow: 1px 4px 8px #646464;

}

img{

width: 500px;

height: 280px;

}

(3)JavaScript代码段：

function allowDrop(ev){

//不执行默认处理(拒绝被拖放)

ev.preventDefault();

};

function drag(ev){

//使用setData(数据类型，携带的数据)

//方法将要拖放的数据存入dataTransfer对象

ev.dataTransfer.setData("Text",ev.target.id);

};

function drop(ev){

//不执行默认处理(拒绝被拖放)

ev.preventDefault();

//使用getData()获取到数据，然后赋值给data

var data = ev.dataTransfer.getData("Text");

//使用appendChild方法把拖动的节点放到元素节点中成为其子节点

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

};

4.实现的效果如下：

(1)未拖放之前：

(2)拖放之后：