library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

demos: added wrappers for sortables

Browse Source
This commit is contained in:
Paul Bakaus 2008-12-31 14:17:03 +00:00
parent 64adc9136f
commit 24f46c501e
8 changed files with 96 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
demos/sortable/connectwith.html
View File

@ -8,8 +8,8 @@
<script type="text/javascript" src="../../ui/ui.sortable.js"></script> <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css"> <style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; } .demo ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
li { margin: 3px; padding: 2px; width: 120px; } .demo li { margin: 3px; padding: 2px; width: 120px; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
@ -20,6 +20,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<ul> <ul>
<li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 1</li>
@ -37,5 +38,15 @@
<li class="ui-state-highlight">Item 5</li> <li class="ui-state-highlight">Item 5</li>
</ul> </ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
The easiest way to make an element draggable. Hold down the mouse and drag it around.
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

15
demos/sortable/default.html
View File

@ -8,8 +8,8 @@
<script type="text/javascript" src="../../ui/ui.sortable.js"></script> <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css"> <style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; } .demo ul { list-style-type: none; margin: 0; padding: 0; }
li { margin: 3px; padding: 2px; } .demo li { margin: 3px; padding: 2px; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
@ -18,6 +18,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<ul> <ul>
<li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 1</li>
@ -32,5 +33,15 @@
<li class="ui-state-default">Item 10</li> <li class="ui-state-default">Item 10</li>
</ul> </ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
The easiest way to make an element draggable. Hold down the mouse and drag it around.
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

15
demos/sortable/delaydistance.html
View File

@ -8,8 +8,8 @@
<script type="text/javascript" src="../../ui/ui.sortable.js"></script> <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css"> <style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; } .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; }
li { margin: 3px; padding: 2px; } .demo li { margin: 3px; padding: 2px; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
@ -26,6 +26,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<p>Delay of 1000ms</p> <p>Delay of 1000ms</p>
@ -47,5 +48,15 @@
<li class="ui-state-default">Item 5</li> <li class="ui-state-default">Item 5</li>
</ul> </ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
The easiest way to make an element draggable. Hold down the mouse and drag it around.
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

15
demos/sortable/droponempty.html
View File

@ -8,8 +8,8 @@
<script type="text/javascript" src="../../ui/ui.sortable.js"></script> <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css"> <style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 133px;} .demo 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; } .demo li { margin: 3px; padding: 2px; width: 120px; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
@ -25,6 +25,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<ul class='droptrue'> <ul class='droptrue'>
<li class="ui-state-default">Can be dropped..</li> <li class="ui-state-default">Can be dropped..</li>
@ -47,5 +48,15 @@
<br clear="both" /> <br clear="both" />
</div><!-- End demo -->
<div class="demo-description">
<p>
The easiest way to make an element draggable. Hold down the mouse and drag it around.
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

11
demos/sortable/droppable.html
View File

@ -27,6 +27,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="droppable" class="ui-widget-header"> <div id="droppable" class="ui-widget-header">
<p>Drop a list item on me - sortable items are automatically connected to droppables.</p> <p>Drop a list item on me - sortable items are automatically connected to droppables.</p>
@ -40,5 +41,15 @@
<li class="ui-state-default">Item 5</li> <li class="ui-state-default">Item 5</li>
</ul> </ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
The easiest way to make an element draggable. Hold down the mouse and drag it around.
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

11
demos/sortable/floating.html
View File

@ -18,6 +18,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<ul id="sortable"> <ul id="sortable">
<li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 1</li>
@ -34,5 +35,15 @@
<li class="ui-state-default">Item 12</li> <li class="ui-state-default">Item 12</li>
</ul> </ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
The easiest way to make an element draggable. Hold down the mouse and drag it around.
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

11
demos/sortable/items.html
View File

@ -23,6 +23,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<p>Completely exclude items from the sorting logic using the 'items' option</p> <p>Completely exclude items from the sorting logic using the 'items' option</p>
@ -44,5 +45,15 @@
<li class="ui-state-default">Item 5</li> <li class="ui-state-default">Item 5</li>
</ul> </ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
The easiest way to make an element draggable. Hold down the mouse and drag it around.
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

11
demos/sortable/placeholder.html
View File

@ -20,6 +20,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<ul id="sortable"> <ul id="sortable">
<li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 1</li>
@ -34,5 +35,15 @@
<li class="ui-state-default">Item 10</li> <li class="ui-state-default">Item 10</li>
</ul> </ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
The easiest way to make an element draggable. Hold down the mouse and drag it around.
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>