html5div可随意拖动怎么实现

html-css07

html5div可随意拖动怎么实现,第1张

1、不自定义进度条的话就只能用默认进度条，默认的进度条是集合在video标签中的，这个我们无法实现不能拖动，但是可以模拟下，你可以使用让鼠标点击到视频所在的video或者div的时候无效化，原理就是鼠标选不到进度条，自然不能拖动了。如果你是要可以控制播放和暂停的话就实现js控制，反正是跳过video自带的控制器自己去写。2、用个透明的层或图片把进度条盖住

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<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>