Skip to content
← Back to Community
How 2 Make A Draggable HTML Element!
Profile icon
h
has Hacker Plan
JWZ6

How 2 Make A Draggable Element! (HTML)

Step 1

We first need to get the JQuery libraries.

Copy and paste this:

<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>

Credits Go To code.jquery.com 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(); });

Downsides

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

Anyways...

The Tutorial Is Done.

Bye!

Voters
Profile icon
MattDESTROYER
Profile icon
cuber1515
Profile icon
JWZ6
Comments
hotnewtop
Profile icon
MattDESTROYER

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
JWZ6
Profile icon
cuber1515

lol, your pfp is from the draggable cookie thing you made. Also good tutorial.

Profile icon
JWZ6
Profile icon
Flappybird995

Does it work on mobile?

Profile icon
JWZ6