直接代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽复制</title>
<style>
.divCopy {
width: 100px;
height: 100px;
background: #ff6666;
position: absolute;
left: 0;
top: 0;
cursor: move;
z-index: 5;
border: 2px dashed green;
}
.box {
width: 320px;
height: 320px;
position: absolute;
top: 10px;
right: 10px;
border: 2px dashed #ccc;
}
.divCopyStyle{
float: left;
margin-top: 2px;
margin-left: 2px;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="div1 divCopy">
drag
</div>
<div class="box" id="box"
jquery实现拖拽、复制、放置
最新推荐文章于 2022-06-12 17:20:24 发布
这篇博客展示了如何使用jQuery实现一个简单的拖放功能,包括元素的复制和放置。用户可以拖动一个红色方块,并在指定的框内进行放置。当方块在目标框内时,边框变为蓝色,否则为灰色。放置后,原始元素被替换为具有不同样式的副本。同时,限制最多只能放置9个元素。
摘要由CSDN通过智能技术生成