jQuery实现网页上的内容拖拽

Bravo！！！

于 2020-08-18 11:17:08 发布

阅读量214

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_47982238/article/details/108072995

版权

本文详细介绍了如何利用jQuery库实现网页上的内容拖拽功能，通过创建可拖动元素、设置拖动事件监听及拖动过程中的操作，为用户提供直观的交互体验。无论是图片、区块还是自定义元素，都能轻松实现拖拽效果。

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

<html>
<head>
    <meta charset="UTF-8" />
    <title>index</title>
    <style>
        #div1{
            position: absolute;
            margin: 0px;
        }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
    <div id="div1">
        <img src="bk.png" alt="" />
    </div>
</body>
<script>
    obj=$('#div1');
    drag(obj);

    function drag(obj){
        obj.bind("mousedown",start);
        //给单击鼠标绑定事件
        function start(event){
            deltaX=event.clientX-obj.offset().left;
            deltaY=event.clientY-obj.offset().top;
            //用鼠标的当前位置减去图片本身的位置，好让图片吸附鼠标
            $(document).bind("mousemove",move);
            $(document).bind("mouseup",stop);
            return false;
        }
        function move(even