r1400 - trunk/demos/draggable

r1400 - trunk/demos/draggable


Author: paul.bakaus
Date: Wed Dec 31 06:02:14 2008
New Revision: 1400
Modified:
trunk/demos/draggable/axis.html
trunk/demos/draggable/containment.html
trunk/demos/draggable/cursorat.html
trunk/demos/draggable/default.html
trunk/demos/draggable/delaydistance.html
trunk/demos/draggable/grid.html
trunk/demos/draggable/handle.html
trunk/demos/draggable/helper.html
trunk/demos/draggable/opacity.html
trunk/demos/draggable/revert.html
trunk/demos/draggable/scroll.html
trunk/demos/draggable/snap.html
trunk/demos/draggable/sortable.html
trunk/demos/draggable/zindexstack.html
Log:
demos: added demo wrappers, fixed some issues with non explicit css rules
Modified: trunk/demos/draggable/axis.html
==============================================================================
--- trunk/demos/draggable/axis.html    (original)
+++ trunk/demos/draggable/axis.html    Wed Dec 31 06:02:14 2008
@@ -20,7 +20,8 @@
    </script>
</head>
<body>
-
+<div class="demo">
+    
<div id="draggable" class="ui-widget-content">
    

I can be dragged only vertically


</div>
@@ -29,5 +30,14 @@
    

I can be dragged only horizontally


</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/draggable/containment.html
==============================================================================
--- trunk/demos/draggable/containment.html    (original)
+++ trunk/demos/draggable/containment.html    Wed Dec 31 06:02:14 2008
@@ -19,7 +19,8 @@
    </script>
</head>
<body>
-
+<div class="demo">
+    
<div id="draggable" class="ui-widget-content">
    

I'm contained within the window


</div>
@@ -32,6 +33,15 @@
    <p id="draggable3" class='ui-widget-header'>I'm contained within my
parent
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
<div style='width: 1px; height: 500px;'></div>
</body>
Modified: trunk/demos/draggable/cursorat.html
==============================================================================
--- trunk/demos/draggable/cursorat.html    (original)
+++ trunk/demos/draggable/cursorat.html    Wed Dec 31 06:02:14 2008
@@ -19,7 +19,8 @@
    </script>
</head>
<body>
-
+<div class="demo">
+    
<div id="draggable" class="ui-widget-content">
    

I will always stick to the center (relative to the mouse)


</div>
@@ -32,5 +33,14 @@
    

My cursor position is only controlled for the 'bottom' value


</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/draggable/default.html
==============================================================================
--- trunk/demos/draggable/default.html    (original)
+++ trunk/demos/draggable/default.html    Wed Dec 31 06:02:14 2008
@@ -18,9 +18,21 @@
</head>
<body>
+<div class="demo">
+
<div id="draggable" class="ui-widget-content">
    

Drag me around


</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+The easiest way to make an element draggable. Hold down the mouse and drag
it around.
+



+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/draggable/delaydistance.html
==============================================================================
--- trunk/demos/draggable/delaydistance.html    (original)
+++ trunk/demos/draggable/delaydistance.html    Wed Dec 31 06:02:14 2008
@@ -18,7 +18,8 @@
    </script>
</head>
<body>
-
+<div class="demo">
+    
<div id="draggable" class="ui-widget-content">
    

Only if you drag me by 20 pixels, the dragging will start


</div>
@@ -27,5 +28,14 @@
    

Regardless of the distance, you have to drag and wait for 1000ms
before dragging starts


</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/draggable/grid.html
==============================================================================
--- trunk/demos/draggable/grid.html    (original)
+++ trunk/demos/draggable/grid.html    Wed Dec 31 06:02:14 2008
@@ -18,7 +18,8 @@
    </script>
</head>
<body>
-
+<div class="demo">
+    
<div id="draggable" class="ui-widget-content">
    

I can be dragged in a 20x20 grid system


</div>
@@ -27,5 +28,14 @@
    

I only follow a vertical 50 pixel grid


</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/draggable/handle.html
==============================================================================
--- trunk/demos/draggable/handle.html    (original)
+++ trunk/demos/draggable/handle.html    Wed Dec 31 06:02:14 2008
@@ -18,10 +18,20 @@
    </script>
</head>
<body>
-
+<div class="demo">
+    
<div id="draggable" class="ui-widget-content">
    <p class="ui-widget-header">I can be dragged only by this handle
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/draggable/helper.html
==============================================================================
--- trunk/demos/draggable/helper.html    (original)
+++ trunk/demos/draggable/helper.html    Wed Dec 31 06:02:14 2008
@@ -25,6 +25,7 @@
    </script>
</head>
<body>
+<div class="demo">
<div id="draggable" class="ui-widget-content">
    

Original


@@ -38,5 +39,14 @@
    

Custom helper (in combination with cursorAt)


</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/draggable/opacity.html
==============================================================================
--- trunk/demos/draggable/opacity.html    (original)
+++ trunk/demos/draggable/opacity.html    Wed Dec 31 06:02:14 2008
@@ -18,7 +18,8 @@
    </script>
</head>
<body>
-
+<div class="demo">
+    
<div id="draggable1" class="ui-widget-content">
    

Opacity set to 0.5


</div>
@@ -27,5 +28,14 @@
    

Opacity set to 0.5, using 'clone' as helper


</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/draggable/revert.html
==============================================================================
--- trunk/demos/draggable/revert.html    (original)
+++ trunk/demos/draggable/revert.html    Wed Dec 31 06:02:14 2008
@@ -18,7 +18,8 @@
    </script>
</head>
<body>
-
+<div class="demo">
+    
<div id="draggable" class="ui-widget-content">
    

Revert the original


</div>
@@ -27,5 +28,14 @@
    

Revert the helper


</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/draggable/scroll.html
==============================================================================
--- trunk/demos/draggable/scroll.html    (original)
+++ trunk/demos/draggable/scroll.html    Wed Dec 31 06:02:14 2008
@@ -19,7 +19,8 @@
    </script>
</head>
<body>
-
+<div class="demo">
+    
<div id="draggable" class="ui-widget-content">
    

Scroll set to true, default settings


</div>
@@ -34,5 +35,14 @@
<div style='height: 5000px; width: 1px;'></div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/draggable/snap.html
==============================================================================
--- trunk/demos/draggable/snap.html    (original)
+++ trunk/demos/draggable/snap.html    Wed Dec 31 06:02:14 2008
@@ -22,7 +22,8 @@
    </script>
</head>
<body>
-
+<div class="demo">
+    
<div id="snaptarget" class="ui-widget-header">
    

I'm a snap target


</div>
@@ -50,6 +51,15 @@
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
Modified: trunk/demos/draggable/sortable.html
==============================================================================
--- trunk/demos/draggable/sortable.html    (original)
+++ trunk/demos/draggable/sortable.html    Wed Dec 31 06:02:14 2008
@@ -9,21 +9,22 @@
    <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
-    ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
-    li { margin: 3px; padding: 2px; width: 150px; }
+    #sortable { list-style-type: none; margin: 0; padding: 0; margin-bottom:
10px; }
+    #sortable li { margin: 3px; padding: 2px; width: 150px; }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#sortable").sortable();
        $("#draggable").draggable({
-            connectToSortable: ['ul'],
+            connectToSortable: ['#sortable'],
            helper: 'clone'
        });
    });
    </script>
</head>
<body>
-
+<div class="demo">
+    
<ul>
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
@@ -36,5 +37,14 @@
    <li class="ui-state-default">Item 5</li>
</ul>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
</body>
</html>
Modified: trunk/demos/draggable/zindexstack.html
==============================================================================
--- trunk/demos/draggable/zindexstack.html    (original)
+++ trunk/demos/draggable/zindexstack.html    Wed Dec 31 06:02:14 2008
@@ -19,7 +19,8 @@
    </script>
</head>
<body>
-
+<div class="demo">
+    
<div id="draggable" class="ui-widget-content">
    

I always have a higher z-index than my siblings during drag


</div>
@@ -38,5 +39,14 @@
    </div>
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+


+<!-- Add description here -->
+


+
+</div><!-- End demo-description -->
</body>
</html>