Skip to content
How 2 Make A Draggable HTML Element!
Profile icon
hacker
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!

You are viewing a single comment. View All
Profile icon
JWZ6