Verschiebe deinen Inhalt wohin du willst. Sortable Listen mit JQuery UI.

Mit JQuery UI Sortable kann man Inhaltselemente eines bestimmten Kontainers untereinander verschieben. Wie man diese auch in einen anderen Kontainer verschieben kann, werde ich Euch anhand eines Beispieles demonstrieren.

JQuery Code:

<script type="text/javascript" src="lib/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
 
<script type="text/javascript">
	$(function(){
		$(".sortable").sortable({
			placeholder: 'highlight', 
			items: 'div[sortenable*="true"]', 
			connectWith: '.sort'
		});
		$('.sortable div[sortenable*="true"]').css({
			border:"1px solid #ccc",
			backgroundColor: "#F8F8F8",
			padding:"8px",
			margin:"2px 0"
		});
	});
</script>

Wichtig hier ist die Option “connectWith: ‘.sort’”, mit der wir festlegen, dass die Elemente in alle Kontainer mit der CSS Klasse “.sort” verschoben werden können.

CSS:

.highlight
{
	border:1px dotted #ccc;
	background-color:#FFF;
	height:30px;
}
.sortable
{
	width:300px;
	padding:5px;
	border:1px dotted #ccc;
}

HTML:

<h3>Fr&uuml;chte</h3>
<div class="sortable sort">
	<div sortenable="true">Hund</div>
	<div sortenable="true">Birne</div>
	<div sortenable="true">Maus</div>
	<div sortenable="true">Apfel</div>
        <div sortenable="true">Katze</div>
</div>
<h3>Tiere</h3>
	<div class="sortable sort">
	<div sortenable="true">Huhn</div>
	<div sortenable="true">Orange</div>
	<div sortenable="true">Adler</div>
	<div sortenable="true">Banane</div>
</div>

Beispiel:

Früchte

Hund
Birne
Maus
Apfel
Katze

Tiere

Huhn
Orange
Adler
Banane

Leave a Reply