<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Sortable ghosting functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
<script type="text/javascript" src="/MochiKit/Position.js"></script>
<script type="text/javascript" src="/MochiKit/Visual.js"></script>
<script type="text/javascript" src="/MochiKit/Signal.js"></script>
<script type="text/javascript" src="/MochiKit/DragAndDrop.js"></script>
<script type="text/javascript" src="/MochiKit/Sortable.js"></script>
<style>
ul.testlist {
list-style-type:none;
margin:0;
padding:0;
}
ul.testlist li {
width:200px;
font:12px Verdana;
padding:4px;
cursor:move;
}
ul.testlist li.over {
background-color:#fcb;
}
ul.testlist li img {
float:left;
margin-right:8px;
}
div.dropmarker {
height:6px;
width:200px;
background: url(dropmarker.png) left top;
margin-top:-3px;
margin-left:-5px;
z-index:1000;
overflow: hidden;
}
#testlist4 li {
float:left;
}
</style>
</head>
<body>
<h1>script.aculo.us Sortable ghosting functional test file</h1>
<h2>Ghosting</h2>
<ul id="testlist" class="testlist">
<li id="item_1"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_2"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_3"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_4"><img src="icon.png" alt=""/> elit</li>
<li id="item_5"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_6"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_7"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_8"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
<p id="testlist_serialize">(waiting for onChange)</p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
MochiKit.Sortable.Sortable.create('testlist',{ghosting:true,constraint:false,hoverclass:'over',
onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))},
onChange:function(element){$('testlist_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)}
});
// ]]>
</script>
<h2>No ghosting</h2>
<ul id="testlist2" class="testlist">
<li id="item_9"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_10"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_11"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_12"><img src="icon.png" alt=""/> elit</li>
<li id="item_13"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_14"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_15"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_16"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
<p id="testlist2_serialize">(waiting for onChange)</p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
MochiKit.Sortable.Sortable.create('testlist2',{ghosting:false,constraint:false,hoverclass:'over',
onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))},
onChange:function(element){$('testlist2_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)}
});
// ]]>
</script>
<h2>Ghosting (inside position:relative container)</h2>
<div style="position:relative;left:100px;top:-5px;">
<ul id="testlist3" class="testlist">
<li id="item_17"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_18"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_19"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_20"><img src="icon.png" alt=""/> elit</li>
<li id="item_21"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_22"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_23"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_24"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
</div>
<p id="testlist3_serialize">(waiting for onChange)</p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
MochiKit.Sortable.Sortable.create('testlist3',{ghosting:true,constraint:false,
onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))},
onChange:function(element){$('testlist3_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)}
});
// ]]>
</script>
<h2>Ghosting (inside position:relative container)</h2>
<div style="position:relative;left:100px;top:-5px;">
<ul id="testlist4" class="testlist">
<li id="item_417"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_418"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_419"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_420"><img src="icon.png" alt=""/> elit</li>
<li id="item_421"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_422"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_423"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_424"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
</div>
<p id="testlist4_serialize">(waiting for onChange)</p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
MochiKit.Sortable.Sortable.create('testlist4',{overlap:'horizontal',ghosting:true,constraint:false,
onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))},
onChange:function(element){$('testlist4_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)}
});
// ]]>
</script>
<div id="debug"></div>
</body>
</html>
distrib
>
Fedora
>
13
>
i386
>
media
>
os
>
by-pkgid
>
a83c96295685e3a2e488954db8324406
>
files
>
85
