JavaScript Tutorial/jQuery/UI Sortable
Содержание
- 1 30. jQuery UI Sortable - Connect lists
- 2 30. jQuery UI Sortable - Connect lists with Tabs
- 3 30. jQuery UI Sortable - Default functionality
- 4 30. jQuery UI Sortable - Delay start
- 5 30. jQuery UI Sortable - Display as grid
- 6 30. jQuery UI Sortable - Drop placeholder
- 7 30. jQuery UI Sortable - Handle empty lists
- 8 30. jQuery UI Sortable - Include / exclude items
- 9 30. jQuery UI Sortable - Portlets
- 10 30. Placehoder, helper for sortable
- 11 30. sortable helperMaker
- 12 30. sortable placeholder: "empty"
- 13 30. Sortable update event
- 14 30. Sortable with place holder
30. jQuery UI Sortable - Connect lists
<source lang="javascript">
<!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>
30. jQuery UI Sortable - Connect lists with Tabs
<source lang="javascript">
<!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>
30. jQuery UI Sortable - Default functionality
<source lang="javascript">
<!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>
30. jQuery UI Sortable - Delay start
<source lang="javascript">
<!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>
30. jQuery UI Sortable - Display as grid
<source lang="javascript">
<!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>
30. jQuery UI Sortable - Drop placeholder
<source lang="javascript">
<!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>
30. jQuery UI Sortable - Handle empty lists
<source lang="javascript">
<!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>
30. jQuery UI Sortable - Include / exclude items
<source lang="javascript">
<!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>
30. jQuery UI Sortable - Portlets
<source lang="javascript">
<!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>
Enable portlets (styled divs) as sortables and use the connectWith
option to allow sorting between columns.
</body> </html></source>
30. Placehoder, helper for sortable
<source lang="javascript">
<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>
30. sortable helperMaker
<source lang="javascript">
<!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 $("
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>
30. sortable placeholder: "empty"
<source lang="javascript">
<!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>
30. Sortable update event
<source lang="javascript">
<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>
30. Sortable with place holder
<source lang="javascript">
<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>