HTML5之拖放功能

要接受元素的放下,目标元素必须监听至少3个事件:

  (1) 首先是dragenter事件,用来决定是否接受“拖动的元素”被放下,如果接受放下,那么该事件就被取消,进入下一个事件

   (2)然后开始dragover事件,用来确定给用户什么样的反馈,即位于该元素之上时呈现什么样的效果,如果该事件被取消,反馈一般是一个鼠标指针,

 也可以使用dropEffect属性定义,如果事件没有被取消,那么就是默认的行为,默认的行为一般就是什么也不做。

    (3)最后是drop事件,也就是实际将执行的放下动作,这个事件也需要被取消,这样dropEffect属性的设置就可以被使用


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>范例——拖放</title>
<style>
body {
	font-family: 'Microsoft YaHei';
}
div.drag {
	background-color:#AACCFF;
	border:1px solid #666666;
	cursor:move;
	height:100px;
	width:100px;
	margin:10px;
	float:left;	
}
div.drop {
	background-color:#EEEEEE;
	border:1px solid #666666;
	cursor: pointer;
	height:150px;
	width:150px;
	margin:10px;
	float:left;
}
</style>
</head>
<body>
<div draggable="true" class="drag"
      ondragstart="dragStartHandler(event)">Drag me!</div>
<div class="drop"
      ondragenter="dragEnterHandler(event)"
      ondragover="dragOverHandler(event)"
      ondrop="dropHandler(event)">Drop here!<ol /></div>
<script>
var internalDNDType = 'text'; // 设定一个自订的关键词,定义DND数据类型
function dragStartHandler(event) {
    // 将数据复制到DataTransfer对象,指定DND数据类型
    event.dataTransfer.setData(internalDNDType,
                                     event.target.textContent);
    event.effectAllowed = 'move'; // 设定允许的操作,这里是仅允许移动
}
// dragEnter事件
function dragEnterHandler(event) {
    // 检查该拖放是否包含指定的DND数据类型,从而决定是否取消事件
    if (event.dataTransfer.types.contains(internalDNDType))
      if (event.preventDefault) event.preventDefault(); // 取消事件
}
// dragOver事件
function dragOverHandler(event) {
    event.dataTransfer.dropEffect = 'copy';             // 设定回馈
    if (event.preventDefault) event.preventDefault(); // 取消事件
}
// drop事件
function dropHandler(event) {
    // 获取拖曳时放置的DND数据
	var data = event.dataTransfer.getData(internalDNDType);
    // 下面建立一个li元素,将数据放进去
    var li = document.createElement('li');
    li.textContent = data;
    event.target.lastChild.appendChild(li);
}
</script>
</body>
</html>


HTML5之拖放功能_第1张图片





你可能感兴趣的:(HTML5之拖放功能)