Question

html5指南-3.如何实现html元素拖拽功能_html5教程技巧

Answer 1

本文的内容是关于在html5中如何实现html元素拖拽功能。在html5之前要实现拖拽，需要借助js，现在html5内部就支持了拖拽的功能，但是要实现稍微复杂的功能还是少不了js的帮忙。下面我们看几个例子。 1.创建拖拽对象 我们可以通过draggable属性告诉浏览器，哪些元素需要实现拖拽功能。draggable有三个值：true：元素可以被拖拽；false：元素不能被拖拽；auto：浏览器自己判断元素是否能被拖拽。 系统默认值是auto，但auto情况下浏览器对不同元素拖拽功能的支持是不一样，如：支持img对象，不支持div对象。所以，如果需要拖拽一个元素，最好还是把draggale设置为true。下面我们看一个例子：
代码如下: Example#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; } drop here
var src = document.getElementById("src"); var target = document.getElementById("target"); 运行效果：


2.处理拖拽事件 现在我们来了解拖拽相关的事件，有两种类型的事件，一种是拖拽对象的事件，一种是投放区的事件。拖拽事件包括：dragstart：当元素拖拽开始触发；drag：在元素拖拽过程中触发；dragend：元素拖拽结束时触发。下面我们就看一个例子：
代码如下: Example#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; } drop here
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; } 运行效果：


3.创建投放区 我们来看投放区相关的事件：dragenter：当拖拽对象进入投放区时触发；dragover：拖拽对象在投放区内移动时触发；dragleave：拖拽对象没有投放到投放区，离开投放区的时候触发；drop：拖拽对象投放在投放区时触发。 我们来看一个例子：
代码如下: Example#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; } drop here
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"); } } 运行结果：




4.使用DataTransfer 我们使用DataTransfer从拖拽对象向投放区传递数据。DataTransfer有下面的属性和方法：types：返回数据的格式；getData(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"; } } 效果：


上面的一些例子不同浏览器运行效果可能不同，我用的是chrome浏览器，除了例5和6不支持多文件外，其他例子运行正常。大家可以下载demo。 demo下载地址：Html5Guide.draggable.rar