To make an HTML DOM element like div draggable we can make use of jQuery UI.
Example :We have a div element that can be moved by clicking on it with the mouse and dragging it anywhere within the viewport.
Code :<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#box {
width:200px;
padding:20px;
background:#eee;
text-align:center;
border: 1px solid #ccc
}
</style>
<script>
$(function () {
$("#box").draggable();
});
</script>
</head>
<body>
<div id="box" class="ui-widget-content">
<p>You can drag this box</p>
</div>
</body>
</html>
Have Questions? Post them here!
More Posts related to jQuery,
- jQuery: Check if an element exists or not
- [jQuery] Uncaught ReferenceError: $ is not defined at index.html:5
- Make div element draggable using jQuery
- jQuery : Move to top of the page
- Dynamically Obtaining Browser Screen Width and Height with jQuery [Updated 2023]
- How to check if an element is hidden using jQuery code?
- Redirect page using jQuery
- Disable jQuery button after being click
More Posts:
- Error: Can not find the tag library descriptor for - Java
- Fix: Eclipse Cant Connect to any repository not Authorized Error GitHub - Eclipse
- Command to know the Available Memory on Linux System - Linux
- How to Change Eclipse Default Web Browser - Eclipse
- REST API to get all Jira projects - Postman, Basic Auth - Jira
- How to create SharePoint Document Library - SharePoint
- Examples: Convert String to int in JavaScript - JavaScript
- [Python] Fix: ValueError: All arrays must be of the same length - Python