Learn to Code via Tutorials on Repl.it!

← Back to all posts
How 2 Make A Draggable HTML Element!
h
JWZ6 (715)

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!

Comments
hotnewtop
MattDESTROYER (20)

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

cuber1515 (91)

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