jQuery draggable()
jQuery Tutorial » jQuery draggable ()
What is a jQuery draggable()?
draggable() jQuery method allows you to move DOM items using the mouse.
Once the item becomes draggable, we can move it by clicking on it with mouse and drag it anywhere on your page.
Syntax draggable () method in two forms:
2. $(selector, context).draggable ("action", params)
How do you make items draggable?
Making a traceable object is quite simple. Set the draggable = true attribute to the item you want to make mobile.
<head>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#dragg {
width: 150px;
height: 120px;
font-family: "Comic Sans MS", cursive;
font-size: 18px;
font-weight: bold;
color: #0FF;
background-color: #039;
padding: 20px;
}
</style>
<script>
$(function() {
$( "#dragg" ).draggable();
});
</script>
</head>
<body>
<div id="dragg">
<p>I am draggable! move me</p>
</div>
</body>
</html>
Related subjects:
jQuery slideUp
scrool smoth
Effects hide / show
jQuery selectors
Tags: jQuery draggable() mobile, not working on mobile, element, list, touch, alternative, multiple items, cursor, npm, drag and drop, scope, handle
What is jQuery draggable?
Is jQuery UI still supported?
How do you make elements draggable?
What is the use of jQuery UI?
Make elements draggable with constraining movement - Example
Here is an example that illustrates the constraining movement of the items on the screen using a draggable hold option ()
<!DOCTYPE html>
<html>
<head>
<link
href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#div11 {
width: 500px;
height: 150px;
background-color: #91BCBD;
font-weight: bold;
font-family: "Comic Sans MS", cursive;
font-size: 18px;
}
#div12 {
width: 500px;
height: 150px;
background-color: #0CF;
font-family: "Comic Sans MS", cursive;
font-size: 18px;
font-weight: bold;
color: #060;
}
</style>
</head>
<body>
<div id="div11"><span>Draggable anywhere in this div11</span><br /><br /></div>
<div id="div12"><span>Draggable only horizontally</span><br /><br /></div>
<script>
$("#div11 span").draggable({
containment: "#div11",
});
$("#div12 span").draggable({
axis: "x",
});
</script>
</body>
</html>
First box, where span elements (text) are not allowed to go outside the box when you dragg, but can be moved anywhere in it.
Second box, span elements (text) are allowed to be dragged only horizontally. This is done using the "x" axis option.
Move content by duplicating
Example to demonstrate how to move an item that is cloning the selected item.
<!DOCTYPE html>
<head>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#div6{
font-family: "Comic Sans MS", cursive;
font-size: 18px;
font-weight: bold;
color: #009;
padding: 20px;
float: left;
width: 70%;
margin-top: 20px;
border: thin solid #999;
}
</style>
</head>
<body>
<div id="div6">
<span>You can duplicate me....</span>
</div>
<script>
$("#div6 span").draggable ({
helper : "clone"
});
</script>
</body>
</html>
jQuery draggable() mobile, not working on mobile, element, list, touch, alternative, multiple items, cursor, npm, drag and drop, scope, handle
What is jQuery draggable?
Is jQuery UI still supported?
How do you make elements draggable?
What is the use of jQuery UI?
JQuery draggable() - jquery
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.