Scribd
Upload
30 views2 pages

Draggable:: Lang Charset Name Content

The document includes code for a web page that implements drag and drop functionality. It uses jQuery and jQuery UI to make a <div> element draggable by calling the .draggable() method on it. It also links to jQuery UI stylesheet and JavaScript files to enable drag and drop interactions. A second example makes a <div> resizable by calling the .resizable() method.

Uploaded by

Pallab Datta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views2 pages

Draggable:: Lang Charset Name Content

The document includes code for a web page that implements drag and drop functionality. It uses jQuery and jQuery UI to make a <div> element draggable by calling the .draggable() method on it. It also links to jQuery UI stylesheet and JavaScript files to enable drag and drop interactions. A second example makes a <div> resizable by calling the .resizable() method.

Uploaded by

Pallab Datta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

1.

Draggable:
2. <!doctype html>
3. <html lang="en">
4. <head>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-
scale=1">
7. <title>jQuery UI Draggable - Default functionality</title>
8. <link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
9. <link rel="stylesheet" href="/resources/demos/style.css">
10. <style>
11. #draggable { width: 150px; height: 150px; padding: 0.5em; }
12. </style>
13. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
14. <script src="https://code.jquery.com/ui/1.12.1/jquery-
ui.js"></script>
15. <script>
16. $( function() {
17. $( "#draggable" ).draggable();
18. } );
19. </script>
20. </head>
21. <body>
22.
23. <div id="draggable" class="ui-widget-content">
24. <p>Drag me around</p>
25. </div>
26.
27.
28. </body>
29. </html>

2. resizable:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<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>
<script>
$( function() {
$( "#resizable" ).resizable();
} );
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>

</body>
</html>

You might also like