Re-arranging list items using eq
for SO question http://stackoverflow.com/questions/21270560/jquery-re-arranging-list-items-using-eq
by Jaak Kütt
HTML
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
<ul class="horizontal">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
</ul>
<div>
<p>first</p>
<p>second</p>
<p>third</p>
<p>fourth</p>
<p>fifth</p>
<p>sixth</p>
</div>
CSS
p {
margin: 1px;
cursor: pointer;
}
li {
cursor: pointer;
}
ul.horizontal {
clear: both;
display: block;
height: 40px;
}
ul.horizontal li {
float: left;
background: #ccc;
display: block;
margin-left: 10px;
padding: 5px;
}
JavaScript
$('li, div p').mousedown(function (e) {
var self = $(this),
length = self.siblings().length + 1,
middle = length / 2 - 1,
list = self.parent().children(),
i = self.index() - 1;
if (length % 2) {
$()[i < middle ? 'after' : 'before'].call(list.eq(Math.round(middle)), self);
} else {
list.eq(Math[i < middle ? 'ceil' : 'floor'].call(null, middle)).after(self);
}
});