var body = $("body"); var container = $(".container"); var currentItem; var items = []; var zIndex = 10; var heightOffset = 60; var padding = parseInt(container.css("padding-top")); // This array is meant to represent any form of dynamic data // it could by xml or json or some other format var data = ["one", "two", "three", "four", "five", "six"]; for (var i = 0; i<data.length; i++){ makeItem(data[i], padding + i * heightOffset); } container.css("height", padding*2 + i * heightOffset).css("width",320); function sortByPositionY(a, b){ return a.position().top - b.position().top; } $(document).mousemove(function(e){ mouseX = e.pageX; mouseY = e.pageY; }); $(document).mouseup(function(){ if (currentItem){ clearInterval(currentItem.data("drag")); items.sort(sortByPositionY); for (var i = 0; i<items.length; i++){ items[i].animate({top: padding + i * heightOffset}, "fast"); } } }); function makeItem(txt, y){ container.append("<div class='item'/>"); var item = $(".item").last(); item.css("width", 300).css("height",50).css("top", y); // make it non-selectable in IE item.attr("unselectable", "on"); item.text(txt); items.push(item); item.mousedown(function(e){ var startY = mouseY - item.position().top; item.css("z-index",zIndex++); currentItem = item; currentItem.data("drag", setInterval(function(){ item.css("top", mouseY-startY); }, 60)); }); }
body{ font-family : Georgia, serif; font-size : 14px; } .item{ position: absolute; border : 1px solid #444; padding : 3px; margin:5px; background-color: white; cursor : pointer; } .noSelect{ /* make sure text isn't selectable */ -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } .container{ position: absolute; top: 50px; background-color : #efefef; border : 1px solid gray; padding : 5px; }
<div class="noSelect"> Click and drag the boxes vertically:</div> <div class="container noSelect"></div>