1.拖拽用到的 js事件
drag、dragstart、dragend、dragenter、dragover、dragleave、drop
2.代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,html{
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
position: relative;
}
#part1{
width: 100px;
height: 100px;
background: #DA7C0C;
position: absolute;
z-index: 2;
}
#part2{
width: 300px;
height: 300px;
border: 1px solid #DA7C0C;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<div id="part1" draggable="true" style="left: 0px;top:0px;"></div>
<div id="part2" class="part2"></div>
</body>
<script type="text/javascript">
var part1 = document.getElementById('part1');
var startX, startY;
part1.addEventListener('drag', function(e){
console.log('part1 drag');
});
part1.addEventListener('dragstart', function(e){
console.log('part1 dragstart');
startX = e.clientX;
startY = e.clientY;
});
part1.addEventListener('dragend', function(e){
console.log('part1 dragend');
part1.setAttribute("style", "left:" + parseFloat(parseFloat(part1.style.left) + e.clientX - startX) + 'px;' + "top:" + parseFloat(parseFloat(part1.style.top) + e.clientY - startY) + 'px');
})
var part2 = document.getElementById('part2');
part2.addEventListener('dragenter', function(){
console.log('part2 dragenter');
});
part2.addEventListener('dragover', function(){
console.log('part2 dragover');
});
part2.addEventListener('dragleave', function(){
console.log('part2 dragleave');
});
part2.addEventListener('drop', function(e){
debugger;
console.log('part2 drop');
});
</script>
</html>
701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
