Ticket #1767: drag2.html

---

File drag2.html, 2.4 KB (added by metinex, October 01, 2007 08:54PM UTC)

The HTML that uses http://interface.eyecon.ro/demos/sort.html

<style>






.groupWrapper
{
	width: 32%;
	float: left;
	margin-right: 1%;
	//height: 200px;	
}
.serializer
{
	clear: both;
}
.groupItem
{
	margin-bottom: 20px;
}
.groupItem .itemHeader
{
	line-height: 28px;
	background-color: #DAFF9F;
	border-top: 2px solid #B5EF59;
	color: #000;
	padding: 0 10px;
	cursor: move;
	font-weight: bold;
	font-size: 16px;
	height: 28px;
	position: relative;
}

.groupItem .itemHeader a
{
	position: absolute;
	right: 10px;
	top: 0px;
	font-weight: normal;
	font-size: 11px;
	text-decoration: none;
}
.sortHelper
{
	border: 3px dashed #666;
	width: auto !important;
}
.groupWrapper p
{
	height: 1px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

#sort2{
	border:1px solid #eeeeee
}

</style>
<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript" src="interface.js"></script>
<DIV class=groupWrapper id=sort1>
<DIV class=groupItem id="s3">
<DIV class=itemHeader style="moz-user-select: none">SAT 25th 
Percentile</DIV></DIV>
<DIV class=groupItem id="s4">
<DIV class=itemHeader style="moz-user-select: none">SAT 75th 
Percentile</DIV></DIV>
<DIV class=groupItem id="s5">
<DIV class=itemHeader style="moz-user-select: none">Students in Top 10% of their 
High School Class</DIV></DIV>
<DIV class=groupItem id="s6">
<DIV class=itemHeader style="moz-user-select: none">Acceptance Rate</DIV></DIV>

</DIV>
<DIV class=groupWrapper id="sort2">
<DIV class=groupItem id="0">
<!--DIV class=itemHeader style="moz-user-select: none">Drag &amp; Drop 
here</DIV></DIV-->
<P>&nbsp;</P></DIV>

</STYLE>

<SCRIPT>
save_criteria = function() 
{

}

$(document).ready(
    function () {

		$('div.groupWrapper').Sortable(
			{
				accept: 'groupItem',
				helperclass: 'sortHelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				handle: 'div.itemHeader',
				tolerance: 'pointer',
				onChange : function(ser)
				{
					if(document.getElementById('0'))document.getElementById('s0').style.display='none';
					save_criteria();
					},
					onStart : function()
					{
						$.iAutoscroller.start(this, document.getElementsByTagName('body'));
					},
					onStop : function()
					{
						$.iAutoscroller.stop();
					}
			}
		);
    }
);



function serialize(s)
{
	serial = $.SortSerialize(s);
	alert(serial.hash);
};
</SCRIPT>

Download in other formats:

Original Format