Ticket #5006: connectoToSortable.html

File connectoToSortable.html, 2.4 KB (added by michalm, December 15, 2009 12:09PM UTC)

Bug demo

<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Draggable + Sortable</title>
	<link type="text/css" href="http://jqueryui.com/themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="http://jqueryui.com/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/ui.core.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/ui.draggable.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/ui.sortable.js"></script>
	<style type="text/css">
	.demo ul { list-style-type: none; margin: 0; padding: 0; }
	.demo ul.sortable { float: right; width: 33.3%; }
	.demo li { margin: 0; margin-bottom: 5px; border-width: 5px; }
	.demo ul#draggables li { width: 150px; };
	.demo ul.sortable li { width: 100%; }
	</style>
	<script type="text/javascript">
	$(function() {
		$(".sortable").sortable({
			connectWith: '.sortable',
			forcePlaceholderSize: true,
			placeholder: 'ui-state-highlight',
			revert: true
		});
		$("#draggable").draggable({
			connectToSortable: '.sortable',
			helper: 'clone',
			revert: 'invalid'
		})
		$("ul, li").disableSelection();
		//$(".sortable:hidden").sortable('disable');
	});
	</script>
</head>
<body>
<div class="demo">
	
<ul id="draggables">
	<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
 
<ul class="sortable" style="display: none;">
	<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>
	<li class="ui-state-default">Item 5</li>
</ul>

<ul class="sortable">
	<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>
	<li class="ui-state-default">Item 5</li>
</ul>

<ul class="sortable">
	<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>
	<li class="ui-state-default">Item 5</li>
</ul>

<ul class="sortable">
	<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>
	<li class="ui-state-default">Item 5</li>
</ul>
 
</div><!-- End demo -->
</body>
</html>

Download in other formats:

Original Format