<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div0{
width: 400px;
height: 400px;
border: 1px solid #000000;
position: relative;
left:100px;
top:100px;
}
.div1
{
width: 200px;
height: 200px;
background-color: rgba(255,0,0,0.4);
position: absolute;
display: none;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"></div>
</div>
<script>
/*
1\拖拽div碰撞父容器的div边框时,父容器div对应的边框变成红色,不碰撞恢复
2\鼠标进入大div时,显示小div,鼠标在大div中移动时,小div以鼠标中心移动,当小div超出时禁止超出
鼠标离开时,隐藏小div
*/
var div0,div1;
init();
function init() {
div0=documen
JS-案例-拖拽(实现小div在大div中拖拽效果)
最新推荐文章于 2024-04-16 19:44:59 发布