html5 拖动效果怎么在手机上实现
2016-11-12 · 百度知道合伙人官方认证企业
育知同创教育
html5 拖动效果在手机上实现方法是调用drag和drop一系列函数实现的。
注意：拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否。
举例：
定义可拖放内容
<div id="columns">
<div class="column" draggable="true"><header>A</header></div>
<div class="column" draggable="true"><header>B</header></div>
<div class="column" draggable="true"><header>C</header></div>
</div>
2、监听拖动事件
可附加大量不同事件以监听整个拖放过程：
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
a.这里是开始拖拽
function handleDragStart(e) {
this.style.opacity = '0.4'; // this / e.target is the source node.
}
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
});
b.dragenter、dragover 和 dragleave 事件处理程序可用于在拖动过程中提供额外的可视化提示。例如，在拖动期间将鼠标悬停在某一列上方时，其边框可能会变成虚线。这样，用户就能知道这些列也是放置的目标区域。
哎呦互动
2024-07-12 广告
以前，我们做过JS拖动DIV层的，比如“js实现div拖动功能”。进入HTML5时代，我们也可以用HTML5的代码来实现拖动，对哦，我们之前也做过一个HTML5拖动的，不过，那个是实现从桌面拖动文件到浏览器，“HTML5实现图片拖放特效”，有兴趣的可以看下。
HTML5为我们提供了ondragstart,ondragover,ondrop这三个函数，我不禁想到了做js触屏时的touchstart,touchmove,touchend，看来，代码的设计思路都是差不多的啊。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#rubbishBox
{
float:left;
height:300px;
width:400px;
background-color: grey;
-webkit-writing-mode: lr-tb;
vertical-align: middle;
}
#dragBox
{
width: 504px;
margin-left: 500px;
}
#dragBox div
{
width:500px;
height: 30px;
border:2px dashed grey;
margin-bottom: 10px;
}
#dragBox div:hover
{
background-color: silver;
}
</style>
</head>
<body>
<div id="rubbishBox">垃圾箱<br/></div>
<div id="dragBox">
<div class="drag">a把我拖进垃圾箱吧</div>
<div class="drag">b把我拖进垃圾箱吧</div>
<div class="drag">c把我拖进垃圾箱吧</div>
<div class="drag">d把我拖进垃圾箱吧</div>
<div class="drag">e把我拖进垃圾箱吧</div>
</div>
<script type="text/javascript">
document.ondragover = function(ev) { ev.preventDefault(); };
var dragChild = null;
var length = document.getElementById("dragBox").childNodes.length;
var nodes = document.getElementById("dragBox").childNodes;
for(var i=0;i<length;i++)
{
if(nodes[i].nodeType==1)
{
if(nodes[i].getAttribute("class")=="drag")
{
nodes[i].setAttribute("draggable","true");
nodes[i].ondragstart = function(ev)
{
var dt = ev.dataTransfer;
dt.effectAllowed = "move";
dt.setData("text/plain",this.innerText);
dragChild = this;
};
nodes[i].ondragend = function(ev)
{
dragChild = null;
};
}
}
}
var rubbishBox = document.getElementById("rubbishBox");
rubbishBox.ondragover = function(ev){
ev.dataTransfer.dropEffect = "move ";
ev.preventDefault();
};
rubbishBox.ondragenter = function(){
this.style.color = "white";
};
rubbishBox.ondrop = function(ev)
{
var dt = ev.dataTransfer;
this.appendChild(document.createTextNode(dt.getData("text/plain")));
this.appendChild(document.createElement("br"));
document.getElementById("dragBox").removeChild(dragChild);
}
</script>
</body>
</html>
