Move the div with jQuery

Question

Move the div with jQuery

I am currently working on making a div draggable without relying on jQuery UI.

Here is the HTML code:

<div class="wrapper">
  <div class="toddler"></div>
</div>

And here is the script I have written:

$.fn.slider = function () {
$(this).on("mousedown", function () {
    $dragging = true;
});

$(this).on("mouseup", function () {
    $dragging = null;
});

$(this).on("mousemove", function () {
    if ($dragging) {
        $(this).offset({
            left: $(this).pageX
        });
    }
});
};

$(".toddler").slider();

You can view my work in this JSFiddle link.

However, despite my efforts, the code does not seem to be functioning correctly. Can anyone help me figure out what's wrong and how to make it work?

jquery html css

Answer 1

Answer №1

const draggableElements = document.querySelectorAll('.draggable');

draggableElements.forEach(element => {
    element.addEventListener('mousedown', (e) => {
        let offsetLeft = e.clientX - element.getBoundingClientRect().left;
        let offsetTop = e.clientY - element.getBoundingClientRect().top;

        function moveElement(e) {
            element.style.left = e.pageX - offsetLeft + 'px';
            element.style.top = e.pageY - offsetTop + 'px';
        }

        document.addEventListener('mousemove', moveElement);

        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', moveElement);
        });
    });
});

Usage:

const containers = document.querySelectorAll('.container');
containers.forEach(container => {
    container.classList.add('draggable');
});

Answer 2

const draggableElements = document.querySelectorAll('.draggable');

draggableElements.forEach(element => {
    element.addEventListener('mousedown', (e) => {
        let offsetLeft = e.clientX - element.getBoundingClientRect().left;
        let offsetTop = e.clientY - element.getBoundingClientRect().top;

        function moveElement(e) {
            element.style.left = e.pageX - offsetLeft + 'px';
            element.style.top = e.pageY - offsetTop + 'px';
        }

        document.addEventListener('mousemove', moveElement);

        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', moveElement);
        });
    });
});

Usage:

const containers = document.querySelectorAll('.container');
containers.forEach(container => {
    container.classList.add('draggable');
});

Answer 3

Answer №2

Utilizing jqueryUI is highly recommended for smoother drag functionality. While it is possible to drag without it, the seamless experience that jqueryUI provides cannot be matched.

Here are some examples:

Link 1

Link 2

I advise integrating a drag plugin into your function to enhance its smoothness.

Function implementation:

$(function() {
$('body').on('mousedown', 'div', function() {
    $(this).addClass('draggable').parents().on('mousemove', function(e) {
        $('.draggable').offset({
            top: e.pageY - $('.draggable').outerHeight() / 2,
            left: e.pageX - $('.draggable').outerWidth() / 2
        }).on('mouseup', function() {
            $(this).removeClass('draggable');
        });
    });
    e.preventDefault();
}).on('mouseup', function() {
    $('.draggable').removeClass('draggable');
});
});

Answer 4

Utilizing jqueryUI is highly recommended for smoother drag functionality. While it is possible to drag without it, the seamless experience that jqueryUI provides cannot be matched.

Here are some examples:

Link 1

Link 2

I advise integrating a drag plugin into your function to enhance its smoothness.

Function implementation:

$(function() {
$('body').on('mousedown', 'div', function() {
    $(this).addClass('draggable').parents().on('mousemove', function(e) {
        $('.draggable').offset({
            top: e.pageY - $('.draggable').outerHeight() / 2,
            left: e.pageX - $('.draggable').outerWidth() / 2
        }).on('mouseup', function() {
            $(this).removeClass('draggable');
        });
    });
    e.preventDefault();
}).on('mouseup', function() {
    $('.draggable').removeClass('draggable');
});
});

Move the div with jQuery

Answer №1

Answer №2

Similar questions

Top method for utilizing overlays

Adjust the width of the element to match the size of the image within

Executing a dropdown menu click event using PHP and AJAX

How can you ensure that the execution of your code only moves forward after the successful completion of asynchronous requests in jQuery Ajax

Storing information in a file with jQuery

Ways to display jQuery values as HTML text

Setting up breakpoints for nested rows in Bootstrap can be achieved by utilizing the responsive

Best practices for sending variables to an HTML page using nodemailer

Check if the div has been clicked, even if its child elements have also

C# MVC - Enabling dynamic row addition in an HTML table with multiple fields consolidated into a single cell

The active class consistently adds new menu options without removing the previous ones

What could be causing the issue with my Angular integration with Jira Issue Collector to not function properly?

Using jQuery to animate a div element with CSS3

Is there a way to restrict the quantity of items that can be sorted in a sortable element (

Generating RSS Feed on HTML View in Rails 4

Utilize jQuery to invoke an ASP page method from an HTML page

Aligning Divs in a Responsive Browser

Adjust the color of a contenteditable div once the value matches

How can we align images above one another in a responsive manner using Bootstrap 3?

Obtain the identification of a div that was generated using jQuery