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!
cuber1515
lol, your pfp is from the draggable cookie thing you made. Also good tutorial.
JWZ6
thx XD @cuber1515
Flappybird995
Does it work on mobile?
Cool! You can do this with vanilla JavaScript, I managed to get this working for most elements (text elements like
h1
,h2
... andp
don't seem to work properly, you can probably fix it somehow, I just can't be bothered). This will work for things likediv
s,input
s andtextarea
s e.t.c.My attempt at draggable elements
nice @MattDESTROYER