html5指南-3.如何实现html元素拖拽功能
程序员文章站
2023-11-27 10:42:16
本文的内容是关于在html5中如何实现html元素拖拽功能。在html5之前要实现拖拽,需要借助js,现在html5内部就支持了拖拽的功能,但是要实现稍微复杂的功能还是少不了js的帮忙... 13-01-07...
本文的内容是关于在html5中如何实现html元素拖拽功能。在html5之前要实现拖拽,需要借助js,现在html5内部就支持了拖拽的功能,但是要实现稍微复杂的功能还是少不了js的帮忙。下面我们看几个例子。
1.创建拖拽对象
我们可以通过draggable属性告诉浏览器,哪些元素需要实现拖拽功能。draggable有三个值:true:元素可以被拖拽;false:元素不能被拖拽;auto:浏览器自己判断元素是否能被拖拽。
系统默认值是auto,但auto情况下浏览器对不同元素拖拽功能的支持是不一样,如:支持img对象,不支持div对象。所以,如果需要拖拽一个元素,最好还是把draggale设置为true。下面我们看一个例子:
<!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;
}
</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");
</script>
</body>
</html>
运行效果:
2.处理拖拽事件
现在我们来了解拖拽相关的事件,有两种类型的事件,一种是拖拽对象的事件,一种是投放区的事件。拖拽事件包括:dragstart:当元素拖拽开始触发;drag:在元素拖拽过程中触发;dragend:元素拖拽结束时触发。下面我们就看一个例子:
<!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>
运行效果:
3.创建投放区
我们来看投放区相关的事件:dragenter:当拖拽对象进入投放区时触发;dragover:拖拽对象在投放区内移动时触发;dragleave:拖拽对象没有投放到投放区,离开投放区的时候触发;drop:拖拽对象投放在投放区时触发。
我们来看一个例子:
<!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>
运行结果:
4.使用datatransfer
我们使用datatransfer从拖拽对象向投放区传递数据。datatransfer有下面的属性和方法:types:返回数据的格式;getdata(<format>):返回指定格式数据;setdata(<format>, <data>):设置指定格式数据;cleardata(<format>):移除指定格式数据;files:返回已经投放的文件数组。
我们来看下面的例子,他实现的效果和例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,我们可以结合其他特性一起使用,比如结合拖拽特效,如下例:
<!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对象,我们可以把他当做file数组对象,file包含下面属性:name:文件名字;type:文件类型(mime类型);size:文件大小。
运行效果:
6.上传文件
下面介绍一个通过拖拽ajax上传文件的实例。
<!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>
效果:
demo下载地址:html5guide.draggable.rar
1.创建拖拽对象
我们可以通过draggable属性告诉浏览器,哪些元素需要实现拖拽功能。draggable有三个值:true:元素可以被拖拽;false:元素不能被拖拽;auto:浏览器自己判断元素是否能被拖拽。
系统默认值是auto,但auto情况下浏览器对不同元素拖拽功能的支持是不一样,如:支持img对象,不支持div对象。所以,如果需要拖拽一个元素,最好还是把draggale设置为true。下面我们看一个例子:
复制代码
代码如下:<!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;
}
</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");
</script>
</body>
</html>
运行效果:
2.处理拖拽事件
现在我们来了解拖拽相关的事件,有两种类型的事件,一种是拖拽对象的事件,一种是投放区的事件。拖拽事件包括:dragstart:当元素拖拽开始触发;drag:在元素拖拽过程中触发;dragend:元素拖拽结束时触发。下面我们就看一个例子:
复制代码
代码如下:<!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>
运行效果:
3.创建投放区
我们来看投放区相关的事件:dragenter:当拖拽对象进入投放区时触发;dragover:拖拽对象在投放区内移动时触发;dragleave:拖拽对象没有投放到投放区,离开投放区的时候触发;drop:拖拽对象投放在投放区时触发。
我们来看一个例子:
复制代码
代码如下:<!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>
运行结果:
4.使用datatransfer
我们使用datatransfer从拖拽对象向投放区传递数据。datatransfer有下面的属性和方法:types:返回数据的格式;getdata(<format>):返回指定格式数据;setdata(<format>, <data>):设置指定格式数据;cleardata(<format>):移除指定格式数据;files:返回已经投放的文件数组。
我们来看下面的例子,他实现的效果和例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,我们可以结合其他特性一起使用,比如结合拖拽特效,如下例:
复制代码
代码如下:<!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对象,我们可以把他当做file数组对象,file包含下面属性:name:文件名字;type:文件类型(mime类型);size:文件大小。
运行效果:
6.上传文件
下面介绍一个通过拖拽ajax上传文件的实例。
复制代码
代码如下:<!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>
效果:
demo下载地址:html5guide.draggable.rar