Web拖放
--在桌面应用程序上,可以将元素从一个位置拖放到另外一个位置,但在web上,没有一种能够实现这种操作的标准技术,从而在web上去实现这个功能并不容易
--在HTML5标准引入了拖放API,从而使我们有可能开发出与桌面应用程序完全相同的web应用程序
一,源元素事件
执行以下方法,需要先阻止默认行为 e.preventDefault()
--在拖放API中引入了一些新的事件,其中有一些元素是由源元素(拖动的元素)触发,称之为源元素事件,另外一些事件由目标元素触发(源元素投放的元素)
源元素事件:
----------dragstart 当拖动操作开始,触发这个事件
----------drag 与mousemove事件相似,它是在源元素发生拖动时触发的
----------dragend 当拖动操作结束(无论是否成功),源元素触发这个事件
简单的示例(绑定这三个事件):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d_rect{width: 400px;height: 400px;border: 1px solid red;}
#d_show{width: 400px;height: 100px;border: 1px solid red;}
</style>
<script>
function $(id) {
return document.getElementById(id);
}
function initial(){
var img = $("img");
img.addEventListener("dragstart",drag_start,false);