您的位置：首页 > Web前端 > HTML5

html5之拖放

2015-07-30 11:21 555 查看

1)创建来源项目

1.1)draggable属性的值：

true——此元素能被拖动；

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

auto——浏览器可以自主决定某个元素是否能被拖动；

1.2）被拖动元素的事件：

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

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

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

2）创建释放区

2.1）释放区事件：

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

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

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

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

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#src > * {float:left;}
#src > img {border: thin solid black; padding: 2px; margin:4px;}
#target {border: thin solid black; margin:4px;}
#target { height: 81px; width: 81px; text-align: center; display: table;}
#target > p {display: table-cell; vertical-align: middle;}
img.dragged {background-color: lightgrey;}
</style>
</head>
<body>
<div id="src">
<img draggable="true" id="banana" src="banana100.png" alt="banana"/>
<img draggable="true" id="apple" src="apple100.png" alt="apple"/>
<img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
<div id="target">
<p id="msg">Drop Here</p>
</div>
</div>

<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>
</body>
</html>

3)使用DataTransfer对象

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

DragEvent对象定义的额外属性：

dataTransfer——返回用于传输数据到释放区的对象（DataTransfer）；

3.2)DataTransfer对象定义的属性：

types——返回数据的格式；

getData(<format>)——返回指定格式的数据；

setData(<format>,<data>)——设置指定格式的数据；

clearData(<format>)——移除指定格式的数据；

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

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#src > * {float:left;}
#src > img {border: thin solid black; padding: 2px; margin:4px;}
#target {border: thin solid black; margin:4px;}
#target { height: 81px; width: 81px; text-align: center; display: table;}
#target > p {display: table-cell; vertical-align: middle;}
img.dragged {background-color: lightgrey;}
</style>
</head>
<body>
<div id="src">
<img draggable="true" id="banana" src="banana100.png" alt="banana"/>
<img draggable="true" id="apple" src="apple100.png" alt="apple"/>
<img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
<div id="target">
<p id="msg">Drop Here</p>
</div>
</div>

<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>
</body>
</html>

3.3）拖放文件：

File对象定义的属性

name——获取文件名；

type——获取文件类型，以MIME类型表示；

size——获取文件大小（以字节计算）；

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
.table {display:table;}
.row {display:table-row;}
.cell {display: table-cell; padding: 5px;}
.label {text-align: right;}
#target {border: medium double black; margin:4px; height: 50px;
width: 200px; text-align: center; display: table;}
#target > p {display: table-cell; vertical-align: middle;}
</style>
</head>
<body>
<form id="fruitform" method="post" action="http://titan:8080/form">
<div class="table">
<div class="row">
<div class="cell label">Bananas:</div>
<div class="cell"><input name="bananas" value="2"/></div>
</div>
<div class="row">
<div class="cell label">Apples:</div>
<div class="cell"><input name="apples" value="5"/></div>
</div>
<div class="row">
<div class="cell label">Cherries:</div>
<div class="cell"><input name="cherries" value="20"/></div>
</div>
<div class="row">
<div class="cell label">File:</div>
<div class="cell"><input type="file" name="file"/></div>
</div>
<div class="row">
<div class="cell label">Total:</div>
<div id="results" class="cell">0 items</div>
</div>
</div>
<div id="target">
<p id="msg">Drop Files Here</p>
</div>
<button id="submit" type="submit">Submit Form</button>
</form>
<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>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航