Scribd
Upload
26 views

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
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

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
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