jquery实现拖拽、复制、放置

最新推荐文章于 2022-06-12 17:20:24 发布

编号90015478

最新推荐文章于 2022-06-12 17:20:24 发布

阅读量2.6k

点赞数 1

分类专栏： jquery 文章标签： js拖放

本文链接：https://blog.csdn.net/qq_20353887/article/details/71713150

版权

这篇博客展示了如何使用jQuery实现一个简单的拖放功能，包括元素的复制和放置。用户可以拖动一个红色方块，并在指定的框内进行放置。当方块在目标框内时，边框变为蓝色，否则为灰色。放置后，原始元素被替换为具有不同样式的副本。同时，限制最多只能放置9个元素。

摘要由CSDN通过智能技术生成

直接代码
<!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"