詳細介紹html5之拖放的範例程式碼
- 黄舟原創
- 2017-03-15 15:42:471476瀏覽
1)建立來源項目
1.1)draggable屬性的值：
true— —此元素可拖曳；
false－此元素無法拖曳；
## auto－瀏覽器可自主決定某個元素是否能拖曳；
1.2）被拖曳元素的事件：
dragstart— —在元素開始拖曳時觸發；
drag－在元素拖曳時反覆觸發；
drag# end－在拖曳操作完成時觸發；
##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>
<p 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"/>
<p id="target">
<p id="msg">Drop Here</p>
</p>
</p>
<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
DragEvent物件定義的額外屬性：
dataTransfer－傳回用於傳輸資料到釋放區的物件（DataTransfer）；
3.2)
DataTransfer物件定義的屬性：
types－傳回資料的格式;# getData(0313a12b65aa20a048ec62b8cf470fd2)－傳回指定格式的資料；
setData(0313a12b65aa20a048ec62b8cf470fd2,
clearData(0313a12b65aa20a048ec62b8cf470fd2)－移除指定格式的資料；
############################################################################################### #
<!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>
<p 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"/>
<p id="target">
<p id="msg">Drop Here</p>
</p>
</p>
<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－取得檔案名稱；############## name－取得檔案名稱；############## 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">
<p class="table">
<p class="row">
<p class="cell label">Bananas:</p>
<p class="cell"><input name="bananas" value="2"/></p>
</p>
<p class="row">
<p class="cell label">Apples:</p>
<p class="cell"><input name="apples" value="5"/></p>
</p>
<p class="row">
<p class="cell label">Cherries:</p>
<p class="cell"><input name="cherries" value="20"/></p>
</p>
<p class="row">
<p class="cell label">File:</p>
<p class="cell"><input type="file" name="file"/></p>
</p>
<p class="row">
<p class="cell label">Total:</p>
<p id="results" class="cell">0 items</p>
</p>
</p>
<p id="target">
<p id="msg">Drop Files Here</p>
</p>
<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>以上是詳細介紹html5之拖放的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！