<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>拖动DIV</title>
<style type="text/css">
div{
width:200px
height:200px
background-color:#cef
position:absolute
}
</style>
<script type="text/javascript">
function movestart(obj) {
var width=event.offsetX
var height=event.offsetY
document.onmousemove=function() {
obj.style.left=event.clientX-width+"px"
obj.style.top=event.clientY-height+"px"
}
}
function moveend() {
document.onmousemove=null
}
</script>
</head>
<body>
<div id="mydv" onmousedown="movestart(this)" onmouseup="moveend()">这个可以拖动</div>
</body>
</html>
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 事件处理程序可用于在拖动过程中提供额外的可视化提示。例如，在拖动期间将鼠标悬停在某一列上方时，其边框可能会变成虚线。这样，用户就能知道这些列也是放置的目标区域。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）