html5之拖放

当前位置 : 首页 > 网页制作 > html5 > html5之拖放

html5之拖放

来源: 作者: 时间:2016-01-14 17:05
1)创建来源项目1 1)draggable属性的值:true此元素能被拖动;false此元素不能被拖动;auto浏览器可以自主决定某个元素是否能被拖动;1 2)被拖动元素的事件:dragstart在元素开始被拖动时

1)创建来源项目

1.1)draggable属性的值:

true——此元素能被拖动;

false——此元素不能被拖动;

auto——可以自主决定某个元素是否能被拖动;

1.2)被拖动元素的事件:

dragstart——在元素开始被拖动时触发;

drag——在元素被拖动时反复触发;

dragend——在拖动操作完成时触发;

2)创建释放区

2.1)释放区事件:

dragenter——当被拖动元素进入释放区所占据的屏幕空间时触发;

dragover——当被拖动元素在释放区内触发时移动触发;

dragleave——当被拖动元素没有放入就离开释放区时触发;

drop——当被拖动元素在释放区放下时触发;

 




banana/ apple/ cherry/

Drop Here

<script> var src = document.getElementById(src); var target = document.getElementById(target); var msg = document.getElementById(msg); var draggedID; target.ondragenter = handleDrag; target.ondragover = handleDrag; function handleDrag(e) { e.preventDefault(); } target.ondrop = function(e) { var newElem = document.getElementById(draggedID).cloneNode(false); target.innerHTML = ; target.appendChild(newElem); e.preventDefault(); } src.ondragstart = function(e) { draggedID = e.target.id; e.target.classList.add(dragged); } src.ondragend = function(e) { var elems = document.querySelectorAll(.dragged); for (var i = 0; i < elems.length; i++) { elems[i].classList.remove(dragged); } } </script>3)使用DataTransfer对象

3.1)与拖放操作所触发的事件同时派发的对象是DragEvent,它派生于MouseEvent。

DragEvent对象定义的额外属性:

dataTransfer——返回用于传输数据到释放区的对象(DataTransfer);

3.2)DataTransfer对象定义的属性:

types——返回数据的格式;

getData()——返回指定格式的数据;

setData(,)——设置指定格式的数据;

clearData()——移除指定格式的数据;

files——返回已被拖动文件的列表;

 




banana/ apple/ cherry/

Drop Here

<script> var src = document.getElementById(src); var target = document.getElementById(target); target.ondragenter = handleDrag; target.ondragover = handleDrag; function handleDrag(e) { e.preventDefault(); } target.ondrop = function(e) { var droppedID = e.dataTransfer.getData(Text); var newElem = document.getElementById(droppedID).cloneNode(false); target.innerHTML = ; target.appendChild(newElem); e.preventDefault(); } src.ondragstart = function(e) { e.dataTransfer.setData(Text, e.target.id); e.target.classList.add(dragged); } src.ondragend = function(e) { var elems = document.querySelectorAll(.dragged); for (var i = 0; i < elems.length; i++) { elems[i].classList.remove(dragged); } } </script>3.3)拖放文件:

File对象定义的属性

name——获取文件名;

type——获取文件类型,以MIME类型表示;

size——获取文件大小(以字节计算);

 




Bananas:
Apples:
Cherries:
File:
Total:
0 items

Drop Files Here

<script> var target = document.getElementById(target); var httpRequest; var fileList; document.getElementById(submit).onclick = handleButtonPress; target.ondragenter = handleDrag; target.ondragover = handleDrag; function handleDrag(e) { e.preventDefault(); } target.ondrop = function(e) { fileList = e.dataTransfer.files; e.preventDefault(); } function handleButtonPress(e) { e.preventDefault(); var form = document.getElementById(fruitform); var formData = new FormData(form); if (fileList || true) { for (var i = 0; i < fileList.length; i++) { formData.append(file + i, fileList[i]); } } httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = handleResponse; httpRequest.open(POST, form.action); httpRequest.send(formData); } function handleResponse() { if (httpRequest.readyState == 4 && httpRequest.status == 200) { var data = JSON.parse(httpRequest.responseText); document.getElementById(results).innerHTML = You ordered + data.total + items; } } </script>

 

 

Tag:

相关文章

网友评论

<