📄 dragdrop7_test.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title><script src="../../lib/prototype.js" type="text/javascript"></script><script src="../../src/scriptaculous.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[Position.includeScrollOffsets = true;Draggables.clear = function (event) { while (Draggables.drags.length) { var d = Draggables.drags.pop(); var e = d.element; d.stopScrolling(); d.destroy(); d.element = null; if (e.parentNode) {e.parentNode.removeChild(e)}; }}function cleanup() { //try to remove circular references lis = document.getElementsByTagName("li"); for (i = 0; i < lis.length; i++) { if (lis[i].longListItem) {lis[i].longListItem.destroy();} else if (lis[i].container) {lis[i].container.destroy();} } Draggables.clear();}window.onload = function() { var li = $("masterList").getElementsByTagName('LI'); for (var i = 0; i < li.length; i++) { //var d = new LongListItem(li[i]); //li[i].onmousedown = d.onMouseDown.bindAsEventListener(d); var d = new Draggable(li[i], {revert: true, ghosting: false, scroll: "rightContainers" }); } var divs = $("rightContainers").getElementsByTagName("div"); for (i = 0; i < divs.length; i++) { if (divs[i].className && Element.hasClassName(divs[i], "container")) { Droppables.add(divs[i].id, {hoverclass: "hover", scrollingParent: "rightContainers"}); } } Event.observe(window, 'unload', cleanup, false);}//]]></script><style type="text/css">html, body { margin:0; padding: 0; height: 100% !important;}body { position:relative; color: black; background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small;}h1 {font-size:115%;}h2 {font-size: 110%;}h3 {font-size: 105%;}div, p, li, td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small;}p {margin: 0 0 .7em 0; padding:0;}ul { position:relative; list-style: none; margin:0; padding:0; overflow: visible;}li {position:relative;}.instructions {font-style:italic;}#leftDiv { position: absolute; top: 0; left: 0; bottom: 0; width: 30%; margin: 0; padding: 7px; border-right: 2px solid #bb9; background-color: #eed;}#leftDiv li, #rightContainers div.container li { margin: 3px 0; padding: 3px 3em 3px 10px; border: 2px solid #456; background-color: #cde; cursor: move;}#rightContainers { padding: .5em; position: absolute; top: 0; bottom: 0; right: 0; left: 35%; overflow:auto;}#rightContainers div.container{ background-color: #bb9; margin: 0 0 40px 0; padding: 0 0 1px 0; border: 2px solid #775;}#rightContainers div.container h2{ margin:0; padding: 2px 1em 0 1em; text-align:center;}#rightContainers div.container ul { margin: 5px; padding: 0 3px; background-color: white; border: 1px solid black;}#rightContainers div.container ul.empty { padding: 3px 0;}#rightContainers div.hover { background-color: #eed;}</style><!--[if IE]><style type="text/css">#leftDiv { height: expression((document.body.clientHeight - 44) + "px");}#leftDiv ul{width:93%;}#leftDiv li div.count { right:4px; top:4px;}#rightContainers li a.remove { display:block; float:none; position:absolute; top: 4px; right: 1.6em; margin:0; padding:0 .2em;}</style><![endif]--></head><body><div id="leftDiv" class=""><form id="frmContinue" action="#" method="post"><p class="instructions">Shrink your window until the right-hand pane is scrollable.</p><p class="instructions">Drag from the list on left to groups on the right, force the right-hand pane to scroll.</p><input name="data" type="hidden" value=" "></form><ul id="masterList"><li id="drag1">One</li><li id="drag2">Two</li><li id="drag3">Three</li><li id="drag4">Four</li><li id="drag5">Five</li><li id="drag6">Six</li><li id="drag7">Seven</li><li id="drag8">Eight</li></ul></div><div id="rightContainers" class=""></form><div id="grp1" class="container"> <h2><span id="grp1_name">Group 1</span></h2> <ul id="grp1ul" class="empty"></ul></div><div id="grp2" class="container"> <h2><span id="grp2_name">Group 2</span></h2> <ul id="grp2ul" class="empty"></ul></div><div id="grp3" class="container"> <h2><span id="grp3_name">Group 3</span></h2> <ul id="grp3ul" class="empty"></ul></div><div id="grp4" class="container"> <h2><span id="grp4_name">Group 4</span></h2> <ul id="grp4ul" class="empty"></ul></div><div id="grp5" class="container"> <h2><span id="grp5_name">Group 5</span></h2> <ul id="grp5ul" class="empty"></ul></div><div id="grp6" class="container"> <h2><span id="grp6_name">Group 6</span></h2> <ul id="grp6ul" class="empty"></ul></div><div id="grp7" class="container"> <h2><span id="grp7_name">Group 7</span></h2> <ul id="grp7ul" class="empty"></ul></div><div id="grp8" class="container"> <h2><span id="grp8_name">Group 8</span></h2> <ul id="grp8ul" class="empty"></ul></div><div id="grp9" class="container"> <h2><span id="grp9_name">Group 9</span></h2> <ul id="grp9ul" class="empty"></ul></div></div></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -