探索HTML5拖拽功能
哈喽！来侃聊天，说说用HTML5怎么玩儿拖动？以前可都是得靠JavaScript才行，但现在HTML5直接就有这个功能了！虽然要用点小技巧还需要借助JS，但别担心，咱们赶紧来看看咋操作吧～
创建拖拽对象
想让浏览器知道哪个东东能拖来拖去？其实很简单，只需要在HTML代码里加个“dragable”属性，它的选项是“true”、“false”或者“auto”。选“true”就是能拖，“false”不能，剩下的就让浏览器自己判断。别忘了，有些元素可不听话，像图片（img）就能随便拖，而段落标记（p）就要默默看着你。如果真想某个元素能拖动，那不如直接设成“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");
来个例子看看：
处理拖拽事件
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;
}
拖曳中好像有两样东西特别关键吧——一个就是被拖曳的”元素”啦；还有一个，就是要把我们要放入的那个”目标物”摆正找好位置啰。简单来说，拖曳的过程大概就只需要三招就能完成了：先轻轻松松地捧起它们，接着慢慢悠悠地挪到想要放的地方，最后再稳稳当当地放下就可以！以实际为例来说明这个过程：
创建投放区
搞定感情问题后，咱们聊聊最近流行啥游戏咧？就是dragenter（进去）、dragover（搬家）、dragleave（出去）和drop（放下）那些个。先别急着走开我给您说说具体怎么操作！
使用DataTransfer
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");
}
}
咱就开始实战演练！先用用这个DataTransfer拖拽功能。教程很简单，先弄清楚该往里面塞什么东西，就算入门了。紧接着，就是getdata(), setData(), clearData()这几个家伙，它们可是关键！我来给你举个实例演示一番，这样学习起来是不是更有乐趣？
拖拽文件
你知道吗？网页里的HTML 5文件API竟然能轻而易举地操纵电脑文件！还有个叫DataTransfer的好搭档，就像个神奇的小盒，记录了各类文件资料的点点滴滴。每个文件都有自己专属的身份信息嘞，如大名儿、型格和身材尺寸等全都一一标识在案！别急请跟随我一步一步学习怎么玩转这个新技能吧：
上传文件
咱们来看看怎么用AJAX上传文件，记得先登录！
Chrome有时会出点儿小状况，但大部分时候还是好使的。你可以试试其他的浏览器，比如先下个demo试用一下再说。
Example
#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;
}
drop here
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");
}
}
评论0