|
Slyweb
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css"/>
<script src="jquery-1.3.2.min.js"></script>
<script src="jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function(){
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
});
</script>
</head>
<body class="iframe">
<div class="demo">
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>
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 <code>draggable</code> properties.
</p>
</div><!-- End demo-description -->
</body>
</html>
<style>
#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>
Опция: appendTo
$('.selector').sortable({ appendTo: 'body' });
//получить опцию
var appendTo = $('.selector').sortable('option', 'appendTo');
//установить опцпию
$('.selector').sortable('option', 'appendTo', 'body');
Опция: axis
$('.selector').sortable({ axis: 'x' });
//получить опцию
var axis = $('.selector').sortable('option', 'axis');
//установить опцию
$('.selector').sortable('option', 'axis', 'x');
Опция: cancel
$('.selector').sortable({ cancel: 'button' });
//получить опцию
var cancel = $('.selector').sortable('option', 'cancel');
//установить опцию
$('.selector').sortable('option', 'cancel', 'button');
Опция: connectWith
$('.selector').sortable({ connectWith: '.otherlist' });
//получить опцию
var connectWith = $('.selector').sortable('option', 'connectWith');
//установить опцию
$('.selector').sortable('option', 'connectWith', '.otherlist');
Опция: containment
$('.selector').sortable({ containment: 'parent' });
//получить опцию
var containment = $('.selector').sortable('option', 'containment');
//установить опцию
$('.selector').sortable('option', 'containment', 'parent');
Опция: cursor
$('.selector').sortable({ cursor: 'crosshair' });
//получить опцию
var cursor = $('.selector').sortable('option', 'cursor');
//установить опцию
$('.selector').sortable('option', 'cursor', 'crosshair');
Опция: cursorAt
$('.selector').sortable({ cursorAt: 'top' });
//получить опцию
var cursorAt = $('.selector').sortable('option', 'cursorAt');
//установить опцию
$('.selector').sortable('option', 'cursorAt', 'top');
Опция: delay
$('.selector').sortable({ delay: 500 });
//получить опцию
var delay = $('.selector').sortable('option', 'delay');
//установить опцию
$('.selector').sortable('option', 'delay', 500);
Опция: distance
$('.selector').sortable({ distance: 30 });
//получить опцию
var distance = $('.selector').sortable('option', 'distance');
//установить опцию
$('.selector').sortable('option', 'distance', 30);
Опция: dropOnEmpty
$('.selector').sortable({ dropOnEmpty: false });
//получить опцию
var dropOnEmpty = $('.selector').sortable('option', 'dropOnEmpty');
//установить опцию
$('.selector').sortable('option', 'dropOnEmpty', false);
Опция: forceHelperSize
$('.selector').sortable({ forceHelperSize: true });
//получить опцию
var forceHelperSize = $('.selector').sortable('option', 'forceHelperSize');
//установить опцию
$('.selector').sortable('option', 'forceHelperSize', true);
Опция: forcePlaceholderSize
$('.selector').sortable({ forcePlaceholderSize: true });
//получить опцию
var forcePlaceholderSize = $('.selector').sortable('option', 'forcePlaceholderSize');
//установить опцию
$('.selector').sortable('option', 'forcePlaceholderSize', true);
Опция: grid
$('.selector').sortable({ grid: [50, 20] });
//получить опцию
var grid = $('.selector').sortable('option', 'grid');
//установить опцию
$('.selector').sortable('option', 'grid', [50, 20]);
Опция: handle
$('.selector').sortable({ handle: 'h2' });
//получить опцию
var handle = $('.selector').sortable('option', 'handle');
//установить опцию
$('.selector').sortable('option', 'handle', 'h2');
Опция: helper
$('.selector').sortable({ helper: 'clone' });
//получить опцию
var helper = $('.selector').sortable('option', 'helper');
//установить опцию
$('.selector').sortable('option', 'helper', 'clone');
Опция: items
$('.selector').sortable({ items: 'li' });
//получить опцию
var items = $('.selector').sortable('option', 'items');
//установить опцию
$('.selector').sortable('option', 'items', 'li');
Опция: opacity
$('.selector').sortable({ opacity: 0.6 });
//получить опцию
var opacity = $('.selector').sortable('option', 'opacity');
//установить опцию
$('.selector').sortable('option', 'opacity', 0.6);
Опция: placeholder
$('.selector').sortable({ placeholder: 'ui-state-highlight' });
//получить опцию
var placeholder = $('.selector').sortable('option', 'placeholder');
//установить опцию
$('.selector').sortable('option', 'placeholder', 'ui-state-highlight');
Опция: revert
$('.selector').sortable({ revert: true });
//получить опцию
var revert = $('.selector').sortable('option', 'revert');
//установить опцию
$('.selector').sortable('option', 'revert', true);
Опция: scroll
$('.selector').sortable({ revert: true });
//получить опцию
var scroll = $('.selector').sortable('option', 'scroll');
//установить опцию
$('.selector').sortable('option', 'scroll', false);
Опция: scrollSensitivity
$('.selector').sortable({ scrollSensitivity: 40 });
//получить опцию
var scrollSensitivity = $('.selector').sortable('option', 'scrollSensitivity');
//установить опцию
$('.selector').sortable('option', 'scrollSensitivity', 40);
Опция: scrollSpeed
$('.selector').sortable({ scrollSpeed: 40 });
//получить опцию
var scrollSpeed = $('.selector').sortable('option', 'scrollSpeed');
//установить опцию
$('.selector').sortable('option', 'scrollSpeed', 40);
Опция: tolerance
$('.selector').sortable({ tolerance: 'pointer' });
//получить опцию
var tolerance = $('.selector').sortable('option', 'tolerance');
//установить опцию
$('.selector').sortable('option', 'tolerance', 'pointer');
Опция: zIndex
$('.selector').sortable({ tolerance: 'pointer' });
//получить опцию
var zIndex = $('.selector').sortable('option', 'zIndex');
//установить опцию
$('.selector').sortable('option', 'zIndex', 5);
Событие: start
$('.selector').sortable({
start: function(event, ui) { ... }
});
$('.selector').bind('sortstart', function(event, ui) {
...
});
Событие: sort
$('.selector').sortable({
sort: function(event, ui) { ... }
});
$('.selector').bind('sort', function(event, ui) {
...
});
Событие: change
$('.selector').sortable({
change: function(event, ui) { ... }
});
$('.selector').bind('sortchange', function(event, ui) {
...
});
Событие: beforeStop
$('.selector').sortable({
beforeStop: function(event, ui) { ... }
});
$('.selector').bind('sortbeforeStop', function(event, ui) {
...
});
Событие: stop
$('.selector').sortable({
stop: function(event, ui) { ... }
});
$('.selector').bind('sortstop', function(event, ui) {
...
});
Событие: update
$('.selector').sortable({
update: function(event, ui) { ... }
});
$('.selector').bind('sortupdate', function(event, ui) {
...
});
Событие: receive
$('.selector').sortable({
receive: function(event, ui) { ... }
});
$('.selector').bind('sortreceive', function(event, ui) {
...
});
Событие: remove
$('.selector').sortable({
remove: function(event, ui) { ... }
});
$('.selector').bind('sortremove', function(event, ui) {
...
});
Событие: over
$('.selector').sortable({
over: function(event, ui) { ... }
});
$('.selector').bind('sortover', function(event, ui) {
...
});
Событие: out
$('.selector').sortable({
out: function(event, ui) { ... }
});
$('.selector').bind('sortout', function(event, ui) {
...
});
Событие: activate
$('.selector').sortable({
activate: function(event, ui) { ... }
});
$('.selector').bind('sortactivate', function(event, ui) {
...
});
Событие: deactivate
$('.selector').sortable({
deactivate: function(event, ui) { ... }
});
$('.selector').bind('sortdeactivate', function(event, ui) {
...
});
Метод: destroy
Метод: disable
Метод: enable
Метод: option
Метод: serialize
Метод: toArray
Метод: refresh
Метод: refreshPositions
Метод: cancel
Используемая тема jQuery UI
Образец разметки jQuery UI CSS струтктуры классов
<ul class="ui-sortable"> <li></li> <li></li> <li></li> </ul>Примечание: Данный образец разметки создан посредством плагина sortable, это не разметка для того чтобы сортировать элементы. Для этого достаточно следующей разметки <ul> <li></li> <li></li> <li></li> </ul>