jQuery Draggable Moves DOM Element in Browser

jQuery draggable moves HTML element in browser

In jquery, we can make any DOM element draggable which means moving DOM element in browser to any locations.

If we want to make any element is draggable, need to enable draggable functionality to that element.

Move the draggable element by clicking on it with the mouse and dragging it anywhere in the browser.

jQuery draggable method syntax


jQuery Example to enable DOM element draggable

This jQuery code is used to enable div element draggable which can be moved anywhere in the browser.

here div element is selected using id 'divTitle' and enabled as draggable.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <meta charset="utf-8" />
    <title>jQuery draggable method</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
    <div id="divTitle" style="height:200px;width:200px;background-color:blue;color:white;">
        div element draggable testing!

draggable div element

draggable div element

After moving the draggable div element

after dragging div element to different location

Privacy Policy  |  Copyrightcopyright symbol2020 - All Rights Reserved.  |  Contact us   |  Report website issues in Github   |  Facebook page   |  Google+ page

Email Facebook Google LinkedIn Twitter