JavaScript DHTML/jQuery/UI Sortable

Содержание

1 jQuery UI Sortable - Connect lists
2 jQuery UI Sortable - Connect lists with Tabs
3 jQuery UI Sortable - Default functionality
4 jQuery UI Sortable - Delay start
- 4.1 Time delay of 300ms:
- 4.2 Distance delay of 15px:
5 jQuery UI Sortable - Display as grid
6 jQuery UI Sortable - Drop placeholder
7 jQuery UI Sortable - Handle empty lists
8 jQuery UI Sortable - Include / exclude items
- 8.1 Specify which items are sortable:
- 8.2 Cancel sorting (but keep as drop targets):
9 jQuery UI Sortable - Portlets
10 Placehoder, helper for sortable
11 Set containment to the container and distance to 30
12 sortable helperMaker
13 sortable placeholder: "empty"
14 Sortable update event
15 Sortable with place holder

jQuery UI Sortable - Connect lists

   <source lang="html4strict">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Sortable - Connect lists</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
 #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
 </style>
 <script type="text/javascript">
 $(function() {
   $("#sortable1, #sortable2").sortable({
     connectWith: ".connectedSortable"
   }).disableSelection();
 });
 </script>

</head> <body>

Item 1
Item 2
Item 3
Item 4
Item 5

Item 1
Item 2
Item 3
Item 4
Item 5

Sort items from one list into another and vice versa, by passing a selector into the connectWith option. The simplest way to do this is to group all related lists with a CSS class, and then pass that class into the sortable function (i.e., connectWith: ".myclass").

</body> </html>

 </source>

jQuery UI Sortable - Connect lists with Tabs

   <source lang="html4strict">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Sortable - Connect lists with Tabs</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
 <script type="text/javascript" src="js/ui/ui.droppable.js"></script>
 <script type="text/javascript" src="js/ui/ui.tabs.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
 </style>
 <script type="text/javascript">
 $(function() {
   $("#sortable1, #sortable2").sortable().disableSelection();
   var $tabs = $("#tabs").tabs();
   var $tab_items = $("ul:first li",$tabs).droppable({
     accept: ".connectedSortable li",
     hoverClass: "ui-state-hover",
     drop: function(ev, ui) {
       var $item = $(this);
       var $list = $($item.find("a").attr("href")).find(".connectedSortable");
       ui.draggable.hide("slow", function() {
         $tabs.tabs("select", $tab_items.index($item));
         $(this).appendTo($list).show("slow");
       });
     }
   });
 });
 </script>

</head> <body>

<a href="#tabs-1">Nunc tincidunt</a>
<a href="#tabs-2">Proin dolor</a>

Item 1
Item 2
Item 3
Item 4
Item 5

Item 1
Item 2
Item 3
Item 4
Item 5

Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.

</body> </html>

 </source>

jQuery UI Sortable - Default functionality

   <source lang="html4strict">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Sortable - Default functionality</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
 #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
 #sortable li span { position: absolute; margin-left: -1.3em; }
 </style>
 <script type="text/javascript">
 $(function() {
   $("#sortable").sortable();
   $("#sortable").disableSelection();
 });
 </script>

</head> <body>

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

</body> </html>

 </source>

jQuery UI Sortable - Delay start

   <source lang="html4strict">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Sortable - Delay start</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; }
 #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; }
 </style>
 <script type="text/javascript">
 $(function() {
   $("#sortable1").sortable({
     delay: 300
   });
   
   $("#sortable2").sortable({
     distance: 15
   });
   $("li").disableSelection();
 });
 </script>

</head> <body>

Time delay of 300ms:

Item 1
Item 2
Item 3
Item 4

Distance delay of 15px:

Item 1
Item 2
Item 3
Item 4

Prevent accidental sorting either by delay (time) or distance. Set a number of milliseconds the element needs to be dragged before sorting starts with the delay option. Set a distance in pixels the element needs to be dragged before sorting starts with the distance option.

</body> </html>

 </source>

jQuery UI Sortable - Display as grid

   <source lang="html4strict">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Sortable - Display as grid</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable { list-style-type: none; margin: 0; padding: 0; }
 #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
 </style>
 <script type="text/javascript">
 $(function() {
   $("#sortable").sortable();
   $("#sortable").disableSelection();
 });
 </script>

</head> <body>

1
2
3
4
5
6
7
8
9
10
11
12

To arrange sortable items as a grid, give them identical dimensions and float them using CSS.

</body> </html>

 </source>

jQuery UI Sortable - Drop placeholder

   <source lang="html4strict">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Sortable - Drop placeholder</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
 #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
 html>body #sortable li { height: 1.5em; line-height: 1.2em; }
 .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
 </style>
 <script type="text/javascript">
 $(function() {
   $("#sortable").sortable({
     placeholder: "ui-state-highlight"
   });
   $("#sortable").disableSelection();
 });
 </script>

</head> <body>

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

When dragging a sortable item to a new location, other items will make room for the that item by shifting to allow white space between them. Pass a class into the placeholder option to style that space to be visible. Use the boolean forcePlaceholderSize option to set dimensions on the placeholder.

</body> </html>

 </source>

jQuery UI Sortable - Handle empty lists

   <source lang="html4strict">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Sortable - Handle empty lists</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
 #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
 </style>
 <script type="text/javascript">
 $(function() {
   $("ul.droptrue").sortable({
     connectWith: "ul"
   });
   $("ul.dropfalse").sortable({
     connectWith: "ul",
     dropOnEmpty: false
   });
   $("#sortable1, #sortable2, #sortable3").disableSelection();
 });
 </script>

</head> <body>

Can be dropped..
..on an empty list
Item 3
Item 4
Item 5

Cannot be dropped..
..on an empty list
Item 3
Item 4
Item 5

Prevent all items in a list from being dropped into a separate, empty list using the dropOnEmpty option set to false. By default, sortable items can be dropped on empty lists.

</body> </html>

 </source>

jQuery UI Sortable - Include / exclude items

   <source lang="html4strict">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Sortable - Include / exclude items</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; }
 #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }
 </style>
 <script type="text/javascript">
 $(function() {
   $("#sortable1").sortable({
     items: "li:not(.ui-state-disabled)"
   });
   $("#sortable2").sortable({
     cancel: ".ui-state-disabled"
   });
   $("#sortable1 li, #sortable2 li").disableSelection();    
 });
 </script>

</head> <body>

Specify which items are sortable:

Item 1
(I"m not sortable or a drop target)
(I"m not sortable or a drop target)
Item 4

Cancel sorting (but keep as drop targets):

Item 1
(I"m not sortable)
(I"m not sortable)
Item 4

Specify which items are eligible to sort by passing a jQuery selector into the items option. Items excluded from this option are not sortable, nor are they valid targets for sortable items.

To only prevent sorting on certain items, pass a jQuery selector into the cancel option. Cancelled items remain valid sort targets for others.

</body> </html>

 </source>

jQuery UI Sortable - Portlets

   <source lang="html4strict">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Sortable - Portlets</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 .column { width: 170px; float: left; padding-bottom: 100px; }
 .portlet { margin: 0 1em 1em 0; }
 .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
 .portlet-header .ui-icon { float: right; }
 .portlet-content { padding: 0.4em; }
 .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
 .ui-sortable-placeholder * { visibility: hidden; }
 </style>
 <script type="text/javascript">
 $(function() {
   $(".column").sortable({
     connectWith: ".column"
   });
   $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
     .find(".portlet-header")
       .addClass("ui-widget-header ui-corner-all")
       .prepend("")
       .end()
     .find(".portlet-content");
   $(".portlet-header .ui-icon").click(function() {
     $(this).toggleClass("ui-icon-minusthick");
     $(this).parents(".portlet:first").find(".portlet-content").toggle();
   });
   $(".column").disableSelection();
 });
 </script>

</head> <body>

Feeds

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

News

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Shopping

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Links

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Images

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Enable portlets (styled divs) as sortables and use the connectWith option to allow sorting between columns.

</body> </html>

 </source>

Placehoder, helper for sortable

   <source lang="html4strict">

<html>

 <head>
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>  
   <script type="text/javascript">

$(document).ready(

 function() {
   $("ul").sortable({
     placeholder: "tmpPlaceholder",
     helper: function(e, element) {
     return $(element).clone().addClass("tmpHelper");
     },
     update : function(e, ui) {
       alert("updated");
     }
   });
 }

);

   </script>
   <style type="text/css">

ul {

   list-style: none;

} li.tmpPlaceholder {

   height: 22px;

}

   </style>
 </head>
 <body>

A
B
C
D

 </body>

</html>

 </source>

Set containment to the container and distance to 30

   <source lang="html4strict">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Sortable - Default functionality</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
 #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
 #sortable li span { position: absolute; margin-left: -1.3em; }
 </style>
 <script type="text/javascript">
 $(function() {
       var sortOpts = {
         axis: "y",
         containment: "#container",
         cursor: "move",
         distance: 30
       };
     
       //make specified element sortable
       $("#sortable").sortable(sortOpts);
 });
 </script>

</head> <body>

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

</body> </html>

 </source>

sortable helperMaker

   <source lang="html4strict">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Sortable - Default functionality</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
 #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
 #sortable li span { position: absolute; margin-left: -1.3em; }
 </style>
 <script type="text/javascript">
 $(function() {
       var sortOpts = {
         helper: helperMaker
       };
       
       function helperMaker(e, ui) {

return $("

").css({

           border:"4px solid #cccccc",
            opacity:"0.5"
         });
       }
 
     
       $("#sortable").sortable(sortOpts);
 });
 </script>

</head> <body>

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

</body> </html>

 </source>

sortable placeholder: "empty"

   <source lang="html4strict">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Sortable - Default functionality</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
 #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
 #sortable li span { position: absolute; margin-left: -1.3em; }
 </style>
 <script type="text/javascript">
 $(function() {
       var sortOpts = {
         placeholder: "empty"
       };
     
       $("#sortable").sortable(sortOpts);
 });
 </script>

</head> <body>

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

</body> </html>

 </source>

Sortable update event

   <source lang="html4strict">

<html>

 <head>
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>  
   <script type="text/javascript">

$(document).ready(

 function() {
   $("ul").sortable({
     placeholder: "tmpPlaceholder",
     helper: function(e, element) {
     return $(element).clone().addClass("tmpHelper");
     },
     update : function(e, ui) {
       alert("updated");
     }
   });
 }

);

   </script>
   <style type="text/css">

ul {

   list-style: none;

} li.tmpPlaceholder {

   height: 22px;

}

   </style>
 </head>
 <body>

A
B
C
D

 </body>

</html>

 </source>

Sortable with place holder

   <source lang="html4strict">

<html>

 <head>
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.sortable.js"></script>    
   <script type="text/javascript">

$(document).ready(

 function() {
   $("ul").sortable({
     placeholder: "tmpPlaceholder",
     helper: function(e, element) {
     return $(element).clone().addClass("tmpHelper");
     }
   });
 }

);

   </script>
   <style type="text/css">

ul {

   list-style: none;

} li {

   background: rgb(218, 191, 162);
   padding: 3px;
   width: 244px;

} li.tmpPlaceholder {

   background: rgb(110, 159, 128);
   height: 22px;

}

   </style>
 </head>
 <body>

A
B
C
D

 </body>

</html>

</source>

JavaScript DHTML/jQuery/UI Sortable

Содержание

jQuery UI Sortable - Connect lists

jQuery UI Sortable - Connect lists with Tabs

jQuery UI Sortable - Default functionality

jQuery UI Sortable - Delay start

Time delay of 300ms:

Distance delay of 15px:

jQuery UI Sortable - Display as grid

jQuery UI Sortable - Drop placeholder

jQuery UI Sortable - Handle empty lists

jQuery UI Sortable - Include / exclude items

Specify which items are sortable:

Cancel sorting (but keep as drop targets):

jQuery UI Sortable - Portlets

Placehoder, helper for sortable

Set containment to the container and distance to 30

sortable helperMaker

sortable placeholder: "empty"

Sortable update event

Sortable with place holder

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты