📄 sortable2_test.html
字号:
<!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 src="../../lib/prototype.js" type="text/javascript"></script> <script src="../../src/scriptaculous.js" type="text/javascript"></script> <script src="../../src/unittest.js" type="text/javascript"></script> <link rel="stylesheet" href="../test.css" type="text/css" /> <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[ Sortable.create('testlist',{ghosting:true,constraint:false,hoverclass:'over', onUpdate:function(sortable){alert(Sortable.serialize(sortable))}, onChange:function(element){$('testlist_serialize').innerHTML = 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[ Sortable.create('testlist2',{ghosting:false,constraint:false,hoverclass:'over', onUpdate:function(sortable){alert(Sortable.serialize(sortable))}, onChange:function(element){$('testlist2_serialize').innerHTML = 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[ Sortable.create('testlist3',{ghosting:true,constraint:false, onUpdate:function(sortable){alert(Sortable.serialize(sortable))}, onChange:function(element){$('testlist3_serialize').innerHTML = 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[ Sortable.create('testlist4',{overlap:'horizontal',ghosting:true,constraint:false, onUpdate:function(sortable){alert(Sortable.serialize(sortable))}, onChange:function(element){$('testlist4_serialize').innerHTML = Sortable.serialize(element.parentNode)} });// ]]></script><div id="debug"></div></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -