H5随便拖拽
Posted liuliang389897172
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5随便拖拽相关的知识，希望对你有一定的参考价值。
<style>
*{
margin: 0px;
padding: 0px;
}
div{
float: left;
width: 100px;
height: 100px;
}
p{
height: 20px;
">saddlebrown;
}
#div1{
border: 1px solid red
}
#div2{
border: 1px solid blue
}
#div3{
border: 1px solid black;
}
</style>
<body>
<div id="div1">
<p draggable="true">拖拽我</p>
<p draggable="true">也拖拽我</p>
</div>
<div id="div2"></div>
<div id="div3"></div>
<script>
var obj = null;//当前被拖拽的元素
document.ondragstart = function (e) {
// console.log(‘开始‘)
e.target.style.opacity = 0.5;
obj = e.target
}
document.ondragend = function (e) {
e.target.style.opacity = 1
}
//浏览器会默认阻止ondrop事件 需要在ondragover中阻止默认行为
document.ondragover = function (param) {
param.preventDefault()
}
document.ondrop = function (e) {
e.target.appendChild(obj)
}
</script>