How to implement drag-and-drop functionality using jQuery



Image not found!!

Creating drag-and-drop features in jQuery is a process that melds mouse event handling, CSS style manipulation, and dynamic updates to the dragged element's position. To initiate this functionality, consider the following rudimentary example as a launchpad.

Incorporating drag-and-drop into your web application begins with setting up event listeners for mouse actions. When a drag starts, adjust the CSS styles to reflect the dragging state and continuously update the element's position based on the mouse movement. jQuery simplifies these tasks, providing an efficient and streamlined approach. The example code illustrates this process, offering a foundational understanding of how to implement drag-and-drop functionality seamlessly. As you delve into more complex scenarios, this basic template will serve as a solid reference point, guiding you through the intricacies of interactive and user-friendly web interfaces.


<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        .draggable {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            color: #fff;
            text-align: center;
            line-height: 200px;
            position: absolute;
            font-weight: 700;
            letter-spacing: 8px;
            cursor: move;
        }
    </style>

    <title>Hide Element</title>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center mt-5">
                <div class="draggable">Drag me!</div>
            </div>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            var isDragging = false;

            $('.draggable').mousedown(function (e) {
                isDragging = true;
                $(this).addClass('dragging');
                offset = $(this).offset();
                deltaX = e.pageX - offset.left;
                deltaY = e.pageY - offset.top;
            });

            $(document).mouseup(function () {
                if (isDragging) {
                    $('.draggable').removeClass('dragging');
                    isDragging = false;
                }
            });

            $(document).mousemove(function (e) {
                if (isDragging) {
                    $('.draggable').offset({
                        top: e.pageY - deltaY,
                        left: e.pageX - deltaX
                    });
                }
            });
        });
    </script>
</body>

</html>


Category List