How 2 Make A Draggable HTML Element!
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
andtextareas
- Will always stay in a
div
Anyways...
The Tutorial Is Done.
Bye!
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 div
s, input
s and textarea
s e.t.c.
My attempt at draggable elements
JWZ6
nice
@MattDESTROYERcuber1515
lol, your pfp is from the draggable cookie thing you made. Also good tutorial.
JWZ6
thx XD
@cuber1515
Does it work on mobile?