Skip to content

Instantly share code, notes, and snippets.

@ushfnuk

ushfnuk/index.html

Last active August 29, 2015 14:05
Show Gist options
  • Save ushfnuk/e52a6f6fca7753c585a1 to your computer and use it in GitHub Desktop.
Save ushfnuk/e52a6f6fca7753c585a1 to your computer and use it in GitHub Desktop.
Download ZIP
Общий список состоящий из нескольких контейнеров с помощью перетаскиволок JQueryUI
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Handle empty lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable1, #sortable2, #sortable3, #sortable4 { 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, #sortable4 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; height: 120px;}
.element-placeholder {border: 2px dashed #ccc;}
</style>
<script>
$(function() {
var fromIndex = -1;
$( "ul.droptrue" ).sortable({
connectWith: "ul",
cursor: 'move',
placeholder: 'element-placeholder',
over: function(event, ui) {
var countOverflow;
var container = $(this),
i = 0,
maxCount = 4;
var direction = 0;
var placeholderClass = 'element-placeholder';
if (container.children(':not(.' + placeholderClass + ')').length === 0) {
ui.sender.sortable('cancel');
}
var index = container.index(),
senderIndex = ui.sender.index();
if (index !== senderIndex) {
if (fromIndex !== -1 && fromIndex !== senderIndex) {
direction = fromIndex > senderIndex ? -1 : 1;
} else {
direction = index > senderIndex ? 1 : -1;
direction = index === senderIndex ? 0 : direction;
}
fromIndex = index;
} else {
if (fromIndex !== index) {
direction = fromIndex > index ? -1 : 1;
fromIndex = index;
} else {
fromIndex = index;
return;
}
}
if (direction === 1) {
container.children(':not(.' + placeholderClass + '):first').appendTo(container.prev());
}
while (container.children().length > 0) {
if (container[0] == ui.sender[0]) {
countOverflow = container.children().length > maxCount + 1;
} else {
countOverflow = container.children().length > maxCount;
}
if (countOverflow) {
container.children(':not(.' + placeholderClass + '):last').prependTo(container.next());
}
container = container.next();
}
},
stop: function() {
fromIndex = -1;
}
});
$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
</ul>
<ul id="sortable2" class="droptrue">
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
<li class="ui-state-default">Item 8</li>
</ul>
<ul id="sortable3" class="droptrue">
<li class="ui-state-default">Item 9</li>
</ul>
<br style="clear:both">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment