-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Constrained to one axis</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
- #draggable { cursor: n-resize; }\r
- #draggable2 { cursor: e-resize; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable({ axis: 'y' });\r
- $("#draggable2").draggable({ axis: 'x' });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>I can be dragged only vertically</p>\r
-</div>\r
-\r
-<div id="draggable2" class="ui-widget-content">\r
- <p>I can be dragged only horizontally</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Constrained to one axis</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+ #draggable { cursor: n-resize; }
+ #draggable2 { cursor: e-resize; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ axis: 'y' });
+ $("#draggable2").draggable({ axis: 'x' });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>I can be dragged only vertically</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>I can be dragged only horizontally</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Containment</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable({ containment: 'window' });\r
- $("#draggable2").draggable({ containment: 'document' });\r
- $("#draggable3").draggable({ containment: 'parent' });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>I'm contained within the window</p>\r
-</div>\r
-\r
-<div id="draggable2" class="ui-widget-content">\r
- <p>I'm contained within the document</p>\r
-</div>\r
-\r
-<div class="ui-widget-content">\r
- <p id="draggable3" class='ui-widget-header'>I'm contained within my parent</p>\r
-</div>\r
-\r
-<div style='width: 1px; height: 500px;'></div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Containment</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ containment: 'window' });
+ $("#draggable2").draggable({ containment: 'document' });
+ $("#draggable3").draggable({ containment: 'parent' });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>I'm contained within the window</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>I'm contained within the document</p>
+</div>
+
+<div class="ui-widget-content">
+ <p id="draggable3" class='ui-widget-header'>I'm contained within my parent</p>
+</div>
+
+<div style='width: 1px; height: 500px;'></div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Cursor at a certain position</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable({ cursorAt: { top: 56, left: 56 } });\r
- $("#draggable2").draggable({ cursorAt: { top: -5, left: -5 } });\r
- $("#draggable3").draggable({ cursorAt: { bottom: 0 } });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>I will always stick to the center (relative to the mouse)</p>\r
-</div>\r
-\r
-<div id="draggable2" class="ui-widget-content">\r
- <p>My cursor is at left -5 and top -5</p>\r
-</div>\r
-\r
-<div id="draggable3" class="ui-widget-content">\r
- <p>My cursor position is only controlled for the 'bottom' value</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Cursor at a certain position</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ cursorAt: { top: 56, left: 56 } });
+ $("#draggable2").draggable({ cursorAt: { top: -5, left: -5 } });
+ $("#draggable3").draggable({ cursorAt: { bottom: 0 } });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>I will always stick to the center (relative to the mouse)</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>My cursor is at left -5 and top -5</p>
+</div>
+
+<div id="draggable3" class="ui-widget-content">
+ <p>My cursor position is only controlled for the 'bottom' value</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Default Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- #draggable { width: 150px; height: 150px; padding: 0.5em; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable();\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Drag me around</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Default Demo</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ #draggable { width: 150px; height: 150px; padding: 0.5em; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable();
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me around</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Distance and Delay</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable({ distance: 20 });\r
- $("#draggable2").draggable({ delay: 1000 });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Only if you drag me by 20 pixels, the dragging will start</p>\r
-</div>\r
-\r
-<div id="draggable2" class="ui-widget-content">\r
- <p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Distance and Delay</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ distance: 20 });
+ $("#draggable2").draggable({ delay: 1000 });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Only if you drag me by 20 pixels, the dragging will start</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Grid</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable({ grid: [20,20] });\r
- $("#draggable2").draggable({ grid: [1,50] });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>I can be dragged in a 20x20 grid system</p>\r
-</div>\r
-\r
-<div id="draggable2" class="ui-widget-content">\r
- <p>I only follow a vertical 50 pixel grid</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Grid</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ grid: [20,20] });
+ $("#draggable2").draggable({ grid: [1,50] });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>I can be dragged in a 20x20 grid system</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>I only follow a vertical 50 pixel grid</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Handle</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
- .ui-widget-header { cursor: move; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable({ handle: 'p' });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p class="ui-widget-header">I can be dragged only by this handle</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Handle</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+ .ui-widget-header { cursor: move; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ handle: 'p' });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p class="ui-widget-header">I can be dragged only by this handle</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Helper</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable({ helper: 'original' });\r
- $("#draggable2").draggable({ helper: 'clone' });\r
- $("#draggable3").draggable({\r
- cursorAt: { top: -5, left: -5 },\r
- helper: function(event) {\r
- return $('<div class="ui-widget-header">I\'m a custom helper</div>');\r
- }\r
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Original</p>\r
-</div>\r
-\r
-<div id="draggable2" class="ui-widget-content">\r
- <p>Clone</p>\r
-</div>\r
-\r
-<div id="draggable3" class="ui-widget-content">\r
- <p>Custom helper (in combination with cursorAt)</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Helper</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ helper: 'original' });
+ $("#draggable2").draggable({ helper: 'clone' });
+ $("#draggable3").draggable({
+ cursorAt: { top: -5, left: -5 },
+ helper: function(event) {
+ return $('<div class="ui-widget-header">I\'m a custom helper</div>');
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Original</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>Clone</p>
+</div>
+
+<div id="draggable3" class="ui-widget-content">
+ <p>Custom helper (in combination with cursorAt)</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Opacity</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable({ opacity: 0.5 });\r
- $("#draggable2").draggable({ opacity: 0.5, helper: 'clone' });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Opacity set to 0.5</p>\r
-</div>\r
-\r
-<div id="draggable2" class="ui-widget-content">\r
- <p>Opacity set to 0.5, using 'clone' as helper</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Opacity</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ opacity: 0.5 });
+ $("#draggable2").draggable({ opacity: 0.5, helper: 'clone' });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Opacity set to 0.5</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>Opacity set to 0.5, using 'clone' as helper</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Revert</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable({ revert: true });\r
- $("#draggable2").draggable({ revert: true, helper: 'clone' });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Revert the original</p>\r
-</div>\r
-\r
-<div id="draggable2" class="ui-widget-content">\r
- <p>Revert the helper</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Revert</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ revert: true });
+ $("#draggable2").draggable({ revert: true, helper: 'clone' });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Revert the original</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>Revert the helper</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Scroll</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable({ scroll: true });\r
- $("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 });\r
- $("#draggable3").draggable({ scroll: true, scrollSpeed: 100 });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Scroll set to true, default settings</p>\r
-</div>\r
-\r
-<div id="draggable2" class="ui-widget-content">\r
- <p>scrollSensitivity set to 100</p>\r
-</div>\r
-\r
-<div id="draggable3" class="ui-widget-content">\r
- <p>scrollSpeed set to 100</p>\r
-</div>\r
-\r
-<div style='height: 5000px; width: 1px;'></div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Scroll</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ scroll: true });
+ $("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 });
+ $("#draggable3").draggable({ scroll: true, scrollSpeed: 100 });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Scroll set to true, default settings</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>scrollSensitivity set to 100</p>
+</div>
+
+<div id="draggable3" class="ui-widget-content">
+ <p>scrollSpeed set to 100</p>
+</div>
+
+<div style='height: 5000px; width: 1px;'></div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Snap</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-content { width: 75px; height: 80px; padding: 0.5em; float: left; margin: 5px; }\r
- .ui-widget-header { height: 130px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable({ snap: true });\r
- $("#draggable2").draggable({ snap: '.ui-widget-header' });\r
- $("#draggable3").draggable({ snap: '.ui-widget-header', snapMode: 'outer' });\r
- $("#draggable4").draggable({ snap: '.ui-widget-header', snapMode: 'inner' });\r
- $("#draggable5").draggable({ snap: '.ui-widget-header', snapTolerance: 50 });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div class="ui-widget-header">\r
- <p>I'm a snap target</p>\r
-</div>\r
-\r
-<br clear="both" />\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Default (snap: true), snaps to all other draggable elements</p>\r
-</div>\r
-\r
-<div id="draggable2" class="ui-widget-content">\r
- <p>I only snap to the big box</p>\r
-</div>\r
-\r
-<div id="draggable3" class="ui-widget-content">\r
- <p>I only snap to the outer edges of the bix box</p>\r
-</div>\r
-\r
-<div id="draggable4" class="ui-widget-content">\r
- <p>I only snap to the inner edges of the big box</p>\r
-</div>\r
-\r
-<div id="draggable5" class="ui-widget-content">\r
- <p>I also snap to the big box but I'm very sticky because I have a high tolerance</p>\r
-</div>\r
-\r
-\r
-\r
-\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Snap</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ .ui-widget-content { width: 75px; height: 80px; padding: 0.5em; float: left; margin: 5px; }
+ .ui-widget-header { height: 130px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ snap: true });
+ $("#draggable2").draggable({ snap: '.ui-widget-header' });
+ $("#draggable3").draggable({ snap: '.ui-widget-header', snapMode: 'outer' });
+ $("#draggable4").draggable({ snap: '.ui-widget-header', snapMode: 'inner' });
+ $("#draggable5").draggable({ snap: '.ui-widget-header', snapTolerance: 50 });
+ });
+ </script>
+</head>
+<body>
+
+<div class="ui-widget-header">
+ <p>I'm a snap target</p>
+</div>
+
+<br clear="both" />
+
+<div id="draggable" class="ui-widget-content">
+ <p>Default (snap: true), snaps to all other draggable elements</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>I only snap to the big box</p>
+</div>
+
+<div id="draggable3" class="ui-widget-content">
+ <p>I only snap to the outer edges of the bix box</p>
+</div>
+
+<div id="draggable4" class="ui-widget-content">
+ <p>I only snap to the inner edges of the big box</p>
+</div>
+
+<div id="draggable5" class="ui-widget-content">
+ <p>I also snap to the big box but I'm very sticky because I have a high tolerance</p>
+</div>
+
+
+
+
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Draggable - Z-Index / Stack</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
- #set { width: 368px; height: 120px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable({ zIndex: 1000 });\r
- $("#set div").draggable({ stack: { group: '#set div', min: 1 } });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>I always have a higher z-index than my siblings during drag</p>\r
-</div>\r
-\r
-<div id="set" class="ui-widget-content">\r
- <div class="ui-widget-content">\r
- <p>We are draggables..</p>\r
- </div>\r
- \r
- <div class="ui-widget-content">\r
- <p>..whose z-indexes are controlled automatically..</p>\r
- </div>\r
- \r
- <div class="ui-widget-content">\r
- <p>..with the stack option.</p>\r
- </div>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Z-Index / Stack</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <style type="text/css">
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+ #set { width: 368px; height: 120px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ zIndex: 1000 });
+ $("#set div").draggable({ stack: { group: '#set div', min: 1 } });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>I always have a higher z-index than my siblings during drag</p>
+</div>
+
+<div id="set" class="ui-widget-content">
+ <div class="ui-widget-content">
+ <p>We are draggables..</p>
+ </div>
+
+ <div class="ui-widget-content">
+ <p>..whose z-indexes are controlled automatically..</p>
+ </div>
+
+ <div class="ui-widget-content">
+ <p>..with the stack option.</p>
+ </div>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Droppable - accept</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- \r
- $("#draggable,#draggable-nonvalid").draggable();\r
- \r
- $("#droppable").droppable({\r
- accept: '#draggable',\r
- activeClass: 'ui-state-hover',\r
- hoverClass: 'ui-state-active',\r
- drop: function(event, ui) {\r
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
- }\r
- });\r
- \r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable-nonvalid" class="ui-widget-content">\r
- <p>I'm draggable but can't be dropped</p>\r
-</div>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Drag me to my target</p>\r
-</div>\r
-\r
-\r
-\r
-<div id="droppable" class="ui-widget-header">\r
- <p>accept: '#draggable'</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Droppable - accept</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <style type="text/css">
+ .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+
+ $("#draggable,#draggable-nonvalid").draggable();
+
+ $("#droppable").droppable({
+ accept: '#draggable',
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable-nonvalid" class="ui-widget-content">
+ <p>I'm draggable but can't be dropped</p>
+</div>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me to my target</p>
+</div>
+
+
+
+<div id="droppable" class="ui-widget-header">
+ <p>accept: '#draggable'</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Droppable - activeClass</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable();\r
- $("#droppable").droppable({\r
- activeClass: 'ui-state-hover',\r
- hoverClass: 'ui-state-active',\r
- drop: function(event, ui) {\r
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
- }\r
- });\r
- \r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Drag me to my target</p>\r
-</div>\r
-\r
-<div id="droppable" class="ui-widget-header">\r
- <p>Drop here</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Droppable - activeClass</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <style type="text/css">
+ .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable();
+ $("#droppable").droppable({
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me to my target</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+ <p>Drop here</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Droppable - Default Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable();\r
- $("#droppable").droppable({\r
- drop: function(event, ui) {\r
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
- }\r
- });\r
- \r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Drag me to my target</p>\r
-</div>\r
-\r
-<div id="droppable" class="ui-widget-header">\r
- <p>Drop here</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Droppable - Default Demo</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <style type="text/css">
+ .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable();
+ $("#droppable").droppable({
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me to my target</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+ <p>Drop here</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Droppable - greedy</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
- <style type="text/css">\r
- #droppable,#droppable2 { width: 200px; height: 160px; padding: 0.5em; float: left; margin: 10px; }\r
- #droppable-inner,#droppable2-inner { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- \r
- $("#draggable").draggable();\r
- \r
- $("#droppable, #droppable-inner").droppable({\r
- activeClass: 'ui-state-hover',\r
- hoverClass: 'ui-state-active',\r
- drop: function(event, ui) {\r
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
- }\r
- });\r
- \r
- $("#droppable2, #droppable2-inner").droppable({\r
- greedy: true,\r
- activeClass: 'ui-state-hover',\r
- hoverClass: 'ui-state-active',\r
- drop: function(event, ui) {\r
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
- }\r
- });\r
- \r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Drag me to my target</p>\r
-</div>\r
-\r
-\r
-\r
-<div id="droppable" class="ui-widget-header">\r
- <p>Outer droppable (greedy deactivated)</p>\r
- <div id="droppable-inner" class="ui-widget-header">\r
- <p>Inner droppable (greedy deactivated)</p>\r
- </div>\r
-</div>\r
-\r
-<div id="droppable2" class="ui-widget-header">\r
- <p>Outer droppable (greedy deactivated)</p>\r
- <div id="droppable2-inner" class="ui-widget-header">\r
- <p>Inner droppable (greedy deactivated)</p>\r
- </div>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Droppable - greedy</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <style type="text/css">
+ #droppable,#droppable2 { width: 200px; height: 160px; padding: 0.5em; float: left; margin: 10px; }
+ #droppable-inner,#droppable2-inner { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+
+ $("#draggable").draggable();
+
+ $("#droppable, #droppable-inner").droppable({
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ $("#droppable2, #droppable2-inner").droppable({
+ greedy: true,
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me to my target</p>
+</div>
+
+
+
+<div id="droppable" class="ui-widget-header">
+ <p>Outer droppable (greedy deactivated)</p>
+ <div id="droppable-inner" class="ui-widget-header">
+ <p>Inner droppable (greedy deactivated)</p>
+ </div>
+</div>
+
+<div id="droppable2" class="ui-widget-header">
+ <p>Outer droppable (greedy deactivated)</p>
+ <div id="droppable2-inner" class="ui-widget-header">
+ <p>Inner droppable (greedy deactivated)</p>
+ </div>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Droppable - hoverClass</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("#draggable").draggable();\r
- $("#droppable").droppable({\r
- hoverClass: 'ui-state-active',\r
- drop: function(event, ui) {\r
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
- }\r
- });\r
- \r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Drag me to my target</p>\r
-</div>\r
-\r
-<div id="droppable" class="ui-widget-header">\r
- <p>Drop here</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Droppable - hoverClass</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <style type="text/css">
+ .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable();
+ $("#droppable").droppable({
+ hoverClass: 'ui-state-active',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me to my target</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+ <p>Drop here</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Droppable - tolerance</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
- <style type="text/css">\r
- .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }\r
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- \r
- $("#draggable").draggable();\r
- \r
- $("#droppable").droppable({\r
- activeClass: 'ui-state-hover',\r
- hoverClass: 'ui-state-active',\r
- drop: function(event, ui) {\r
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
- }\r
- });\r
- \r
- $("#droppable-fit").droppable({\r
- activeClass: 'ui-state-hover',\r
- hoverClass: 'ui-state-active',\r
- tolerance: 'fit',\r
- drop: function(event, ui) {\r
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
- }\r
- });\r
- \r
- $("#droppable-pointer").droppable({\r
- activeClass: 'ui-state-hover',\r
- hoverClass: 'ui-state-active',\r
- tolerance: 'pointer',\r
- drop: function(event, ui) {\r
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
- }\r
- });\r
- \r
- $("#droppable-touch").droppable({\r
- activeClass: 'ui-state-hover',\r
- hoverClass: 'ui-state-active',\r
- tolerance: 'touch',\r
- drop: function(event, ui) {\r
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
- }\r
- });\r
- \r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<div id="draggable" class="ui-widget-content">\r
- <p>Drag me to my target</p>\r
-</div>\r
-\r
-<br clear="both" />\r
-\r
-<div id="droppable" class="ui-widget-header">\r
- <p>Default tolerance</p>\r
-</div>\r
-\r
-<div id="droppable-fit" class="ui-widget-header">\r
- <p>tolerance: 'fit'</p>\r
-</div>\r
-\r
-<div id="droppable-pointer" class="ui-widget-header">\r
- <p>tolerance: 'pointer'</p>\r
-</div>\r
-\r
-<div id="droppable-touch" class="ui-widget-header">\r
- <p>tolerance: 'touch'</p>\r
-</div>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Droppable - tolerance</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <style type="text/css">
+ .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+
+ $("#draggable").draggable();
+
+ $("#droppable").droppable({
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ $("#droppable-fit").droppable({
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ tolerance: 'fit',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ $("#droppable-pointer").droppable({
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ tolerance: 'pointer',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ $("#droppable-touch").droppable({
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ tolerance: 'touch',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me to my target</p>
+</div>
+
+<br clear="both" />
+
+<div id="droppable" class="ui-widget-header">
+ <p>Default tolerance</p>
+</div>
+
+<div id="droppable-fit" class="ui-widget-header">
+ <p>tolerance: 'fit'</p>
+</div>
+
+<div id="droppable-pointer" class="ui-widget-header">
+ <p>tolerance: 'pointer'</p>
+</div>
+
+<div id="droppable-touch" class="ui-widget-header">
+ <p>tolerance: 'touch'</p>
+</div>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Sortable - Connected lists</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.sortable.js"></script>\r
- <style type="text/css">\r
- ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }\r
- li { margin: 3px; padding: 2px; width: 120px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("ul").sortable({\r
- connectWith: ['ul']\r
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<ul>\r
- <li class="ui-state-default">Item 1</li>\r
- <li class="ui-state-default">Item 2</li>\r
- <li class="ui-state-default">Item 3</li>\r
- <li class="ui-state-default">Item 4</li>\r
- <li class="ui-state-default">Item 5</li>\r
-</ul>\r
-\r
-<ul>\r
- <li class="ui-state-highlight">Item 1</li>\r
- <li class="ui-state-highlight">Item 2</li>\r
- <li class="ui-state-highlight">Item 3</li>\r
- <li class="ui-state-highlight">Item 4</li>\r
- <li class="ui-state-highlight">Item 5</li>\r
-</ul>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - Connected lists</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+ <style type="text/css">
+ ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
+ li { margin: 3px; padding: 2px; width: 120px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("ul").sortable({
+ connectWith: ['ul']
+ });
+ });
+ </script>
+</head>
+<body>
+
+<ul>
+ <li class="ui-state-default">Item 1</li>
+ <li class="ui-state-default">Item 2</li>
+ <li class="ui-state-default">Item 3</li>
+ <li class="ui-state-default">Item 4</li>
+ <li class="ui-state-default">Item 5</li>
+</ul>
+
+<ul>
+ <li class="ui-state-highlight">Item 1</li>
+ <li class="ui-state-highlight">Item 2</li>
+ <li class="ui-state-highlight">Item 3</li>
+ <li class="ui-state-highlight">Item 4</li>
+ <li class="ui-state-highlight">Item 5</li>
+</ul>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Sortable - Default Demo</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.sortable.js"></script>\r
- <style type="text/css">\r
- ul { list-style-type: none; margin: 0; padding: 0; }\r
- li { margin: 3px; padding: 2px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("ul").sortable();\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<ul>\r
- <li class="ui-state-default">Item 1</li>\r
- <li class="ui-state-default">Item 2</li>\r
- <li class="ui-state-default">Item 3</li>\r
- <li class="ui-state-default">Item 4</li>\r
- <li class="ui-state-default">Item 5</li>\r
- <li class="ui-state-default">Item 6</li>\r
- <li class="ui-state-default">Item 7</li>\r
- <li class="ui-state-default">Item 8</li>\r
- <li class="ui-state-default">Item 9</li>\r
- <li class="ui-state-default">Item 10</li>\r
-</ul>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - Default Demo</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+ <style type="text/css">
+ ul { list-style-type: none; margin: 0; padding: 0; }
+ li { margin: 3px; padding: 2px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("ul").sortable();
+ });
+ </script>
+</head>
+<body>
+
+<ul>
+ <li class="ui-state-default">Item 1</li>
+ <li class="ui-state-default">Item 2</li>
+ <li class="ui-state-default">Item 3</li>
+ <li class="ui-state-default">Item 4</li>
+ <li class="ui-state-default">Item 5</li>
+ <li class="ui-state-default">Item 6</li>
+ <li class="ui-state-default">Item 7</li>
+ <li class="ui-state-default">Item 8</li>
+ <li class="ui-state-default">Item 9</li>
+ <li class="ui-state-default">Item 10</li>
+</ul>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Sortable - Delay / Distance</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.sortable.js"></script>\r
- <style type="text/css">\r
- ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; }\r
- li { margin: 3px; padding: 2px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- \r
- $("ul:eq(0)").sortable({\r
- delay: 1000\r
- });\r
- \r
- $("ul:eq(1)").sortable({\r
- distance: 50\r
- });\r
- \r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<p>Delay of 1000ms</p>\r
-\r
-<ul>\r
- <li class="ui-state-default">Item 1</li>\r
- <li class="ui-state-default">Item 2</li>\r
- <li class="ui-state-default">Item 3</li>\r
- <li class="ui-state-default">Item 4</li>\r
- <li class="ui-state-default">Item 5</li>\r
-</ul>\r
-\r
-<p>Distance of 50px</p>\r
-\r
-<ul>\r
- <li class="ui-state-default">Item 1</li>\r
- <li class="ui-state-default">Item 2</li>\r
- <li class="ui-state-default">Item 3</li>\r
- <li class="ui-state-default">Item 4</li>\r
- <li class="ui-state-default">Item 5</li>\r
-</ul>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - Delay / Distance</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+ <style type="text/css">
+ ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; }
+ li { margin: 3px; padding: 2px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+
+ $("ul:eq(0)").sortable({
+ delay: 1000
+ });
+
+ $("ul:eq(1)").sortable({
+ distance: 50
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<p>Delay of 1000ms</p>
+
+<ul>
+ <li class="ui-state-default">Item 1</li>
+ <li class="ui-state-default">Item 2</li>
+ <li class="ui-state-default">Item 3</li>
+ <li class="ui-state-default">Item 4</li>
+ <li class="ui-state-default">Item 5</li>
+</ul>
+
+<p>Distance of 50px</p>
+
+<ul>
+ <li class="ui-state-default">Item 1</li>
+ <li class="ui-state-default">Item 2</li>
+ <li class="ui-state-default">Item 3</li>
+ <li class="ui-state-default">Item 4</li>
+ <li class="ui-state-default">Item 5</li>
+</ul>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Sortable - Dropping on empty lists</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.sortable.js"></script>\r
- <style type="text/css">\r
- ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 133px;}\r
- li { margin: 3px; padding: 2px; width: 120px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("ul.droptrue").sortable({\r
- connectWith: ['ul']\r
- });\r
- \r
- $("ul.dropfalse").sortable({\r
- connectWith: ['ul'],\r
- dropOnEmpty: false\r
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<ul class='droptrue'>\r
- <li class="ui-state-default">Can be dropped..</li>\r
- <li class="ui-state-default">..on an empty list</li>\r
- <li class="ui-state-default">Item 3</li>\r
- <li class="ui-state-default">Item 4</li>\r
- <li class="ui-state-default">Item 5</li>\r
-</ul>\r
-\r
-<ul class='dropfalse'>\r
- <li class="ui-state-highlight">Cannot be dropped..</li>\r
- <li class="ui-state-highlight">..on an empty list</li>\r
- <li class="ui-state-highlight">Item 3</li>\r
- <li class="ui-state-highlight">Item 4</li>\r
- <li class="ui-state-highlight">Item 5</li>\r
-</ul>\r
-\r
-<ul class='droptrue'>\r
-</ul>\r
-\r
-<br clear="both" />\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - Dropping on empty lists</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+ <style type="text/css">
+ ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 133px;}
+ li { margin: 3px; padding: 2px; width: 120px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("ul.droptrue").sortable({
+ connectWith: ['ul']
+ });
+
+ $("ul.dropfalse").sortable({
+ connectWith: ['ul'],
+ dropOnEmpty: false
+ });
+ });
+ </script>
+</head>
+<body>
+
+<ul class='droptrue'>
+ <li class="ui-state-default">Can be dropped..</li>
+ <li class="ui-state-default">..on an empty list</li>
+ <li class="ui-state-default">Item 3</li>
+ <li class="ui-state-default">Item 4</li>
+ <li class="ui-state-default">Item 5</li>
+</ul>
+
+<ul class='dropfalse'>
+ <li class="ui-state-highlight">Cannot be dropped..</li>
+ <li class="ui-state-highlight">..on an empty list</li>
+ <li class="ui-state-highlight">Item 3</li>
+ <li class="ui-state-highlight">Item 4</li>
+ <li class="ui-state-highlight">Item 5</li>
+</ul>
+
+<ul class='droptrue'>
+</ul>
+
+<br clear="both" />
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Sortable - Floating</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.sortable.js"></script>\r
- <style type="text/css">\r
- ul { list-style-type: none; margin: 0; padding: 0; }\r
- li { margin: 3px; padding: 2px; float: left; width: 100px; height: 100px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("ul").sortable();\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<ul>\r
- <li class="ui-state-default">Item 1</li>\r
- <li class="ui-state-default">Item 2</li>\r
- <li class="ui-state-default">Item 3</li>\r
- <li class="ui-state-default">Item 4</li>\r
- <li class="ui-state-default">Item 5</li>\r
- <li class="ui-state-default">Item 6</li>\r
- <li class="ui-state-default">Item 7</li>\r
- <li class="ui-state-default">Item 8</li>\r
- <li class="ui-state-default">Item 9</li>\r
- <li class="ui-state-default">Item 10</li>\r
- <li class="ui-state-default">Item 11</li>\r
- <li class="ui-state-default">Item 12</li>\r
-</ul>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - Floating</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+ <style type="text/css">
+ ul { list-style-type: none; margin: 0; padding: 0; }
+ li { margin: 3px; padding: 2px; float: left; width: 100px; height: 100px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("ul").sortable();
+ });
+ </script>
+</head>
+<body>
+
+<ul>
+ <li class="ui-state-default">Item 1</li>
+ <li class="ui-state-default">Item 2</li>
+ <li class="ui-state-default">Item 3</li>
+ <li class="ui-state-default">Item 4</li>
+ <li class="ui-state-default">Item 5</li>
+ <li class="ui-state-default">Item 6</li>
+ <li class="ui-state-default">Item 7</li>
+ <li class="ui-state-default">Item 8</li>
+ <li class="ui-state-default">Item 9</li>
+ <li class="ui-state-default">Item 10</li>
+ <li class="ui-state-default">Item 11</li>
+ <li class="ui-state-default">Item 12</li>
+</ul>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Sortable - Items</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.sortable.js"></script>\r
- <style type="text/css">\r
- ul { list-style-type: none; margin: 0; padding: 0; }\r
- li { margin: 3px; padding: 2px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("ul:eq(0)").sortable({\r
- items: 'li:not(.ui-state-disabled)'\r
- });\r
- \r
- $("ul:eq(1)").sortable({\r
- cancel: '.ui-state-disabled'\r
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<p>Completely exclude items from the sorting logic using the 'items' option</p>\r
-\r
-<ul>\r
- <li class="ui-state-default">Item 1</li>\r
- <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>\r
- <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>\r
- <li class="ui-state-default">Item 4</li>\r
- <li class="ui-state-default">Item 5</li>\r
-</ul>\r
-\r
-<p>Keep the items as valid targets, but non-draggable, using the 'cancel' option</p>\r
-\r
-<ul>\r
- <li class="ui-state-default">Item 1</li>\r
- <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>\r
- <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>\r
- <li class="ui-state-default">Item 4</li>\r
- <li class="ui-state-default">Item 5</li>\r
-</ul>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - Items</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+ <style type="text/css">
+ ul { list-style-type: none; margin: 0; padding: 0; }
+ li { margin: 3px; padding: 2px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("ul:eq(0)").sortable({
+ items: 'li:not(.ui-state-disabled)'
+ });
+
+ $("ul:eq(1)").sortable({
+ cancel: '.ui-state-disabled'
+ });
+ });
+ </script>
+</head>
+<body>
+
+<p>Completely exclude items from the sorting logic using the 'items' option</p>
+
+<ul>
+ <li class="ui-state-default">Item 1</li>
+ <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
+ <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
+ <li class="ui-state-default">Item 4</li>
+ <li class="ui-state-default">Item 5</li>
+</ul>
+
+<p>Keep the items as valid targets, but non-draggable, using the 'cancel' option</p>
+
+<ul>
+ <li class="ui-state-default">Item 1</li>
+ <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
+ <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
+ <li class="ui-state-default">Item 4</li>
+ <li class="ui-state-default">Item 5</li>
+</ul>
+
+</body>
+</html>
-<!doctype html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Sortable - Placeholder</title>\r
- <link type="text/css" href="../demos.css" rel="stylesheet" />\r
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui/ui.sortable.js"></script>\r
- <style type="text/css">\r
- ul { list-style-type: none; margin: 0; padding: 0; }\r
- li { margin: 3px; padding: 2px; }\r
- </style>\r
- <script type="text/javascript">\r
- $(function() {\r
- $("ul").sortable({\r
- placeholder: 'ui-state-highlight'\r
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-\r
-<ul>\r
- <li class="ui-state-default">Item 1</li>\r
- <li class="ui-state-default">Item 2</li>\r
- <li class="ui-state-default">Item 3</li>\r
- <li class="ui-state-default">Item 4</li>\r
- <li class="ui-state-default">Item 5</li>\r
- <li class="ui-state-default">Item 6</li>\r
- <li class="ui-state-default">Item 7</li>\r
- <li class="ui-state-default">Item 8</li>\r
- <li class="ui-state-default">Item 9</li>\r
- <li class="ui-state-default">Item 10</li>\r
-</ul>\r
-\r
-</body>\r
-</html>\r
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - Placeholder</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+ <style type="text/css">
+ ul { list-style-type: none; margin: 0; padding: 0; }
+ li { margin: 3px; padding: 2px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("ul").sortable({
+ placeholder: 'ui-state-highlight'
+ });
+ });
+ </script>
+</head>
+<body>
+
+<ul>
+ <li class="ui-state-default">Item 1</li>
+ <li class="ui-state-default">Item 2</li>
+ <li class="ui-state-default">Item 3</li>
+ <li class="ui-state-default">Item 4</li>
+ <li class="ui-state-default">Item 5</li>
+ <li class="ui-state-default">Item 6</li>
+ <li class="ui-state-default">Item 7</li>
+ <li class="ui-state-default">Item 8</li>
+ <li class="ui-state-default">Item 9</li>
+ <li class="ui-state-default">Item 10</li>
+</ul>
+
+</body>
+</html>
projects / jquery-ui.git / commitdiff