Skip to content
How 2 Make A Draggable HTML Element!
Profile icon
has Hacker Plan

How 2 Make A Draggable Element! (HTML)

Step 1

We first need to get the JQuery libraries.

Copy and paste this:

<script src=""></script> <script src=""></script>

Credits Go To For The Libraries!

Step 2

For our actual JQuery code, we have:

$(function(){ $( "element" ).draggable(); });

The dragging works for:

  • Elements with the id attribute
  • Elements with the class attribute

Using Id

The name of an element's id goes before an # symbol, like this:

$(function(){ $( "#id_name_of_element" ).draggable(); });

Using Class

The name of an element's class goes before an . symbol, like this:

$(function(){ $( "class_name_of_element" ).draggable(); });


  • Doesn't work on mobile
  • Doesn't work for inputs and textareas
  • Will always stay in a div


The Tutorial Is Done.


You are viewing a single comment. View All
Profile icon

Cool! You can do this with vanilla JavaScript, I managed to get this working for most elements (text elements like h1, h2... and p don't seem to work properly, you can probably fix it somehow, I just can't be bothered). This will work for things like divs, inputs and textareas e.t.c.
My attempt at draggable elements

Profile icon