如何實(shí)現(xiàn)html元素拖拽功能-創(chuàng)新互聯(lián)

這篇文章主要講解了“如何實(shí)現(xiàn)html元素拖拽功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何實(shí)現(xiàn)html元素拖拽功能”吧！

10年積累的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有類(lèi)烏齊免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1.創(chuàng)建拖拽對(duì)象
我們可以通過(guò)draggable屬性告訴瀏覽器，哪些元素需要實(shí)現(xiàn)拖拽功能。draggable有三個(gè)值：true：元素可以被拖拽；false：元素不能被拖拽；auto：瀏覽器自己判斷元素是否能被拖拽。
系統(tǒng)默認(rèn)值是auto，但auto情況下瀏覽器對(duì)不同元素拖拽功能的支持是不一樣，如：支持img對(duì)象，不支持div對(duì)象。所以，如果需要拖拽一個(gè)元素，好還是把draggale設(shè)置為true。下面我們看一個(gè)例子：

代碼如下:

運(yùn)行效果：

如何實(shí)現(xiàn)html元素拖拽功能

2.處理拖拽事件
現(xiàn)在我們來(lái)了解拖拽相關(guān)的事件，有兩種類(lèi)型的事件，一種是拖拽對(duì)象的事件，一種是投放區(qū)的事件。拖拽事件包括：dragstart：當(dāng)元素拖拽開(kāi)始觸發(fā)；drag：在元素拖拽過(guò)程中觸發(fā)；dragend：元素拖拽結(jié)束時(shí)觸發(fā)。下面我們就看一個(gè)例子：

代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#src > *
{
float: left;
}
#target, #src > img
{
border: thin solid black;
padding: 2px;
margin: 4px;
}
#target
{
height: 123px;
width: 220px;
text-align: center;
display: table;
}
#target > p
{
display: table-cell;
vertical-align: middle;
}
#target > img
{
margin: 1px;
}
img.dragged
{
background-color: Orange;
}
</style>
</head>
<body>
<div id="src">
<img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
<img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
<img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
<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");
src.ondragstart = function (e) {
e.target.classList.add("dragged");
}
src.ondragend = function (e) {
e.target.classList.remove("dragged");
msg.innerHTML = "drop here";
}
src.ondrag = function (e) {
msg.innerHTML = e.target.id;
}
</script>
</body>
</html>

運(yùn)行效果：

如何實(shí)現(xiàn)html元素拖拽功能

3.創(chuàng)建投放區(qū)
我們來(lái)看投放區(qū)相關(guān)的事件：dragenter：當(dāng)拖拽對(duì)象進(jìn)入投放區(qū)時(shí)觸發(fā)；dragover：拖拽對(duì)象在投放區(qū)內(nèi)移動(dòng)時(shí)觸發(fā)；dragleave：拖拽對(duì)象沒(méi)有投放到投放區(qū)，離開(kāi)投放區(qū)的時(shí)候觸發(fā)；drop：拖拽對(duì)象投放在投放區(qū)時(shí)觸發(fā)。
我們來(lái)看一個(gè)例子：

代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#src > *
{
float: left;
}
#target, #src > img
{
border: thin solid black;
padding: 2px;
margin: 4px;
}
#target
{
height: 123px;
width: 220px;
text-align: center;
display: table;
}
#target > p
{
display: table-cell;
vertical-align: middle;
}
#target > img
{
margin: 1px;
}
img.dragged
{
background-color: lightgrey;
}
</style>
</head>
<body>
<div id="src">
<img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
<img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
<img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
<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>

運(yùn)行結(jié)果：

如何實(shí)現(xiàn)html元素拖拽功能

4.使用DataTransfer
我們使用DataTransfer從拖拽對(duì)象向投放區(qū)傳遞數(shù)據(jù)。DataTransfer有下面的屬性和方法：types：返回?cái)?shù)據(jù)的格式；getData(<format>)：返回指定格式數(shù)據(jù)；setData(<format>, <data>)：設(shè)置指定格式數(shù)據(jù)；clearData(<format>)：移除指定格式數(shù)據(jù)；files：返回已經(jīng)投放的文件數(shù)組。
我們來(lái)看下面的例子，他實(shí)現(xiàn)的效果和例3一樣：

代碼如下:

<!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: 123px;
width: 220px;
text-align: center;
display: table;
}
#target > p
{
display: table-cell;
vertical-align: middle;
}
img.dragged
{
background-color: Orange;
}
</style>
</head>
<body>
<div id="src">
<img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
<img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
<img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
<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>

5.拖拽文件
html5支持file api，可以讓我們操作本地文件。一般我們不直接使用file api，我們可以結(jié)合其他特性一起使用，比如結(jié)合拖拽特效，如下例：

代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
body > *
{
float: left;
}
#target
{
border: medium double black;
margin: 4px;
height: 75px;
width: 200px;
text-align: center;
display: table;
}
#target > p
{
display: table-cell;
vertical-align: middle;
}
table
{
margin: 4px;
border-collapse: collapse;
}
th, td
{
padding: 4px;
}
</style>
</head>
<body>
<div id="target">
<p id="msg">
Drop Files Here</p>
</div>
<table id="data" border="1">
</table>
<script>
var target = document.getElementById("target");
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function (e) {
var files = e.dataTransfer.files;
var tableElem = document.getElementById("data");
tableElem.innerHTML = "<tr><th>Name</th><th>Type</th><th>Size</th></tr>";
for (var i = 0; i < files.length; i++) {
var row = "<tr><td>" + files[i].name + "</td><td>" + files[i].type + "</td><td>" + files[i].size + "</td></tr>";
tableElem.innerHTML += row;
}
e.preventDefault();
}
</script>
</body>
</html>

DataTransfer返回FileList對(duì)象，我們可以把他當(dāng)做file數(shù)組對(duì)象，file包含下面屬性：name：文件名字；type：文件類(lèi)型（MIME類(lèi)型）；size：文件大小。
運(yùn)行效果：

如何實(shí)現(xiàn)html元素拖拽功能

6.上傳文件
下面介紹一個(gè)通過(guò)拖拽ajax上傳文件的實(shí)例。

代碼如下:

<!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="/UploadHandler.ashx">
<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">
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 type="text/javascript">
var target = document.getElementById("target");
var httpRequest;
var fileList;
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function (e) {
fileList = e.dataTransfer.files;
e.preventDefault();
}
document.getElementById("submit").onclick = function handleButtonPress(e) {
e.preventDefault();
var form = document.getElementById("fruitform");
var formData = new FormData(form);
if (fileList) {
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>

效果：

如何實(shí)現(xiàn)html元素拖拽功能

上面的一些例子不同瀏覽器運(yùn)行效果可能不同，我用的是chrome瀏覽器，除了例5和6不支持多文件外，其他例子運(yùn)行正常。大家可以下載demo。
demo下載地址：Html5Guide.draggable.rar

感謝各位的閱讀，以上就是“如何實(shí)現(xiàn)html元素拖拽功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何實(shí)現(xiàn)html元素拖拽功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

文章題目：如何實(shí)現(xiàn)html元素拖拽功能-創(chuàng)新互聯(lián)
文章來(lái)源：http://aaarwkj.com/article2/dgojoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷(xiāo)、自適應(yīng)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

如何實(shí)現(xiàn)html元素拖拽功能-創(chuàng)新互聯(lián)