http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FAjax_Layer%2FDrag_Effects
JavaScript DHTML/Ajax Layer/Drag Effects - История изменений
2026-04-04T23:11:27Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Drag_Effects&diff=1702&oldid=prev
в 09:58, 26 мая 2010
2010-05-26T09:58:48Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:58, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Drag_Effects&diff=1703&oldid=prev
Admin: 1 версия
2010-05-26T07:16:03Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Delayed draggable and Delayed sortable==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<!-- <br />
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>script.aculo.us functional test</title><br />
<script type="text/javascript" src="./scriptaculous-js-1.6.4src/prototype.js"></script><br />
<script type="text/javascript" src="./scriptaculous-js-1.6.4src/effects.js"></script><br />
<script type="text/javascript" src="./scriptaculous-js-1.6.4src/dragdrop.js"></script><br />
<script type="text/javascript"><br />
var myStartEffect = function(element) {<br />
element._opacity = Element.getOpacity(element);<br />
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});<br />
new Effect.Highlight(element, {});<br />
}<br />
</script><br />
<style type="text/css"><br />
h1 {font-size: 1.2em; text-align:center;}<br />
li {<br />
margin: 5px auto;<br />
padding: 2px;<br />
width: 200px;<br />
text-align:center;<br />
list-style-type:none;<br />
border: 2px solid #779;<br />
background-color: #dde<br />
}<br />
div {<br />
margin: 5px auto;<br />
padding: 2px;<br />
width: 300px;<br />
text-align:center;<br />
border: 2px solid #797;<br />
background-color: #ded<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>No delay sortable</h1><br />
<ul id="sort1"><br />
<li id="s1_1">one</li><br />
<li id="s1_2">two</li><br />
<li id="s1_3">three</li><br />
</ul><br />
<h1>Delayed sortable (500 ms)</h1><br />
<ul id="sort2"><br />
<li id="s2_1">one</li><br />
<li id="s2_2">two</li><br />
<li id="s2_3">three</li><br />
</ul><br />
<h1>No delay draggable</h1><br />
<div id="drag1"><br />
Lorem ipsum<br />
</div><br />
<h1>Delayed draggable (1000 ms)</h1><br />
<div id="drag2"><br />
Lorem ipsum<br />
</div><br />
<br />
<script type="text/javascript" charset="utf-8"><br />
Sortable.create("sort1", {starteffect: myStartEffect});<br />
Sortable.create("sort2", {starteffect:myStartEffect, delay:500});<br />
new Draggable("drag1", {starteffect:myStartEffect});<br />
new Draggable("drag2", {starteffect:myStartEffect, delay:1000});<br />
</script><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a><br />
<br />
<br />
==Drag from this table, Drop on this table==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!-- <br />
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<html><br />
<head><br />
<title>Drag &amp; Drop</title><br />
<style type="text/css"><br />
td<br />
{<br />
width: 10em;<br />
text-align: center;<br />
}<br />
table.mytable {<br />
list-style-type: none;<br />
padding: 4px 4px 0 4px;<br />
margin: 0px;<br />
font-size: 13px;<br />
font-family: Arial, sans-serif;<br />
}<br />
table.mytable tr {<br />
margin-bottom: 4px;<br />
padding: 2px 2px;<br />
border: 1px solid #c00;<br />
background-color: #eee;<br />
}<br />
div.draggable {<br />
cursor:move;<br />
padding:2px;<br />
background-color: #BBCCDD;<br />
}<br />
div.dropsite {<br />
padding:2px;<br />
background-color: #DDBB99;<br />
}<br />
div.hoverclass123<br />
{<br />
border:1px solid red;<br />
}<br />
</style><br />
<script language="JavaScript" type="text/javascript" src="./scriptaculous-js-1.6.4src/prototype.js"></script><br />
<script language="JavaScript" type="text/javascript" src="./scriptaculous-js-1.6.4src/scriptaculous.js"></script><br />
<script language="JavaScript" type="text/javascript"><br />
Position.includeScrollOffsets = true;<br />
window.onload = function()<br />
{<br />
var t1 = document.getElementById("t1");<br />
add_divs(t1, "td", "draggable");<br />
var trs = t1.getElementsByTagName("tr");<br />
for (var i = 0; i < trs.length; i++)<br />
{<br />
var divs = document.getElementsByClassName("draggable", trs[i]);<br />
var drag_text = divs[2].innerHTML;<br />
for (var j = 0; j < divs.length; ++j)<br />
{<br />
new Draggable(divs[j], {ghosting:true, revert:true});<br />
}<br />
}<br />
var t2 = document.getElementById("t2");<br />
add_divs(t2, "td", "dropsite");<br />
var divs = document.getElementsByClassName("dropsite", t2);<br />
for (var j = 0; j < divs.length; ++j)<br />
{<br />
Droppables.add(divs[j], {accept:"draggable",<br />
hoverclass:"hoverclass123",<br />
onDrop:function(element, dropon, event)<br />
{ debug("dropped " + element.innerHTML + " on "<br />
+ dropon.innerHTML + "\n")}});<br />
}<br />
};<br />
function debug(text)<br />
{<br />
document.getElementById("debug").innerHTML<br />
= "<pre>" + text + "</pre>";<br />
}<br />
function add_divs(table, tag, classname)<br />
{<br />
var items = table.getElementsByTagName(tag);<br />
for (var i = 0; i < items.length; i++)<br />
items[i].innerHTML =<br />
"<div class="" + classname + "">" + items[i].innerHTML + "</div>";<br />
}<br />
<br />
</script><br />
</head><br />
<body><br />
<p>Drag from this table:</p><br />
<DIV STYLE="padding-left: 50pt;"><br />
<DIV STYLE="overflow: auto; width: 250; height: 100;<br />
border: 1px gray solid;<br />
padding:0px; margin: 0px;"><br />
<table id="t1" class="sortable mytable"><br />
<tr><td>one</td><td>1</td><td>uno</td></tr><br />
<tr><td>two</td><td>2</td><td>dos</td></tr><br />
<tr><td>three</td><td>3</td><td>tres</td></tr><br />
<tr><td>four</td><td>4</td><td>quatro</td></tr><br />
<tr><td>five</td><td>5</td><td>cinco</td></tr><br />
<tr><td>six</td><td>6</td><td>seis</td></tr><br />
<tr><td>seven</td><td>7</td><td>siete</td></tr><br />
<tr><td>eight</td><td>8</td><td>ocho</td></tr><br />
<tr><td>nine</td><td>9</td><td>nueve</td></tr><br />
<tr><td>ten</td><td>10</td><td>diez</td></tr><br />
</table><br />
</DIV><br />
</DIV><br />
<p><br />
<p>Drop on this table:</p><br />
<DIV STYLE="padding-left: 50pt;"><br />
<DIV STYLE="overflow: auto; width: 250; height: 100;<br />
border: 1px gray solid;<br />
padding:0px; margin: 0px;"><br />
<table id="t2" class="sortable mytable"><br />
<tr><td>eleven</td><td>11</td><td>once</td></tr><br />
<tr><td>twelve</td><td>12</td><td>doce</td></tr><br />
<tr><td>thirteen</td><td>13</td><td>trece</td></tr><br />
<tr><td>fourteen</td><td>14</td><td>catorce</td></tr><br />
<tr><td>fifteen</td><td>15</td><td>quince</td></tr><br />
<tr><td>sixteen</td><td>16</td><td>dieciseis</td></tr><br />
<tr><td>seventeen</td><td>17</td><td>diecisiete</td></tr><br />
<tr><td>eightteen</td><td>18</td><td>dieciocho</td></tr><br />
<tr><td>nineteen</td><td>19</td><td>diecinueve</td></tr><br />
<tr><td>twenty</td><td>20</td><td>veinte</td></tr><br />
</table><br />
</DIV><br />
</DIV><br />
<p><br />
<div id="debug"></div><br />
</p><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a><br />
<br />
<br />
==Drag hover effects==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<!-- <br />
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<html><br />
<head><br />
<title>script.aculo.us Drag and drop functional test file</title><br />
<script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script><br />
<script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script><br />
<script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script><br />
</head><br />
<style><br />
div.hoverclass123 {<br />
border:1px solid red;<br />
}<br />
</style><br />
<body><br />
<h1>script.aculo.us Drag and drop functional test file</h1><br />
<h2>w/o hoverclass</h2><br />
<div id="cart" class="cart" style="text-align:center;height:50px;padding:10px;background-color:#fba"><br />
### DROP HERE ###<br />
</div><br />
<script type="text/javascript">Droppables.add("cart", {onDrop:function(element,dropon){alert("w/o hoverclass, should be \"product_id\":" + encodeURIComponent(element.id) + ", dropon should be \"cart\":" + dropon.id)}})</script><br />
<br/><br />
<img alt="Product2" id="product_id" src="./scriptaculous-js-1.6.4src/icon.png" /> &lt;-- drag this!<br />
<script type="text/javascript">new Draggable("product_id", {revert:true})</script><br />
<h2>w/ hoverclass</h2><br />
<br />
<div id="carth" class="cart" style="text-align:center;height:50px;padding:10px;background-color:#fba"><br />
### DROP HERE ###<br />
</div><br />
<script type="text/javascript">Droppables.add("carth", {hoverclass:"hoverclass123",onDrop:function(element, dropon, event){alert("w/ hoverclass: should be \"product_id\":" + encodeURIComponent(element.id) + ", dropon should be \"carth\":" + dropon.id)}})</script><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a><br />
<br />
<br />
==Ghost effect for dragging==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<!-- Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>script.aculo.us Drag and drop functional test file</title><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script><br />
<script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script><br />
<script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script><br />
</head><br />
<body style="background-color:#eee;"><br />
<div style="position:relative;margin-left:100px;top:40px;background-color:white;"><br />
(inside position:relative container)<br />
<h1>script.aculo.us Drag and drop functional test file</h1><br />
<h2>Draggables/Droppables</h2><br />
<div id="absolute_positioned_element" class="box1" style="width:150px;height:150px;background:#bbf;"><br />
<b>Ghosting effect</b><br />
<input type="text" value="blah"/><br />
<div id="hurradiegams">test!</div><br />
<br/><br />
</div><br />
<a href="#" onclick="alert($("hurradiegams").innerHTML); return false;">alert contents of test div</a><br />
<div id="absolute_positioned_element2" class="box1" style="width:150px;height:150px;background:#bbf;"><br />
<span id="handle1">Ghost effect</span><br/><br />
</div><br />
<script type="text/javascript" language="javascript" charset="utf-8"><br />
Position.includeScrollOffsets = true;<br />
new Draggable("absolute_positioned_element",{ghosting: true});<br />
new Draggable("absolute_positioned_element2",{ghosting: true, revert:true});<br />
</script><br />
</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a><br />
<br />
<br />
==Hide component during dragging==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<!-- <br />
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>script.aculo.us Drag and drop functional test file</title><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script><br />
<script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script><br />
<script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script><br />
<style type="text/css" media="screen"><br />
#thelist li { background: green; margin:5px; padding: 30px; }<br />
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }<br />
#revertbox2 { position:absolute;top:40px;left:50px;z-index:1000;width:150px;height:150px;background:#bbf; }<br />
</style><br />
</head><br />
<body><br />
<h1>script.aculo.us Drag and drop functional test file</h1><br />
<h2>Draggables/Droppables</h2><br />
<a href="#" onclick="alert($H(Sortable.sortables).inspect());return false">inspect sortables</a><br />
<div id="revertbox1" class="box1" style="opacity:0.5;z-index:1000;width:150px;height:150px;background:#bfb;"><br />
<span class="handle1">drag here</span><br/><br />
<input type="checkbox" id="shouldrevert1"/> Revert?<br />
</div><br />
<div id="revertbox2" class="box"><br />
<span id="handle2">drag here</span><br/><br />
<input type="checkbox" id="shouldrevert2"/> Revert?<br />
</div><br />
<div id="xxxx">testtest</div><br />
<script type="text/javascript" language="javascript" charset="utf-8"><br />
new Draggable("revertbox1",{scroll:window,zindex:-5,handle:"handle1",revert:function(element){return ($("shouldrevert1").checked)}});<br />
new Draggable("revertbox2",{scroll:window,handle:"handle2",revert:function(element){return ($("shouldrevert2").checked)}});<br />
Droppables.add("xxxx",{accept:["box1","box2"],onDrop:function(){alert("drop!")}});<br />
</script><br />
<br />
<br />
<ul id="thelist" style="padding: 10px; position: absolute; top:20px; left:200px;z-index:1000;"><br />
<li id="thelist_4">Hey there! I"m absolutely positioned</li><br />
<li id="thelist_1">one<br/><form id="form1"><input type="checkbox" onclick="this.checked = !this.checked" value="x" name="x" id="xyz"/><input type="text" id="xxx"></input></form></li><br />
<li id="thelist_2">two<br/><form id="form2"><input type="text" id="xyx"></input></form></li><br />
<li id="thelist_3">three<br/><form id="form3"><input type="text" id="xu3"></input></form></li><br />
</ul><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a><br />
<br />
<br />
==Using drag and move to force the right-hand pane to scroll==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<!-- <br />
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <br />
<title></title><br />
<script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script><br />
<script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
Position.includeScrollOffsets = true;<br />
Draggables.clear = function (event) {<br />
while (Draggables.drags.length) {<br />
var d = Draggables.drags.pop();<br />
var e = d.element;<br />
d.stopScrolling();<br />
d.destroy();<br />
d.element = null;<br />
if (e.parentNode) {e.parentNode.removeChild(e)}; <br />
}<br />
}<br />
function cleanup() { //try to remove circular references<br />
lis = document.getElementsByTagName("li");<br />
for (i = 0; i < lis.length; i++) {<br />
if (lis[i].longListItem) {lis[i].longListItem.destroy();}<br />
else if (lis[i].container) {lis[i].container.destroy();}<br />
}<br />
Draggables.clear();<br />
}<br />
window.onload = function() {<br />
var li = $("masterList").getElementsByTagName("LI");<br />
for (var i = 0; i < li.length; i++) {<br />
//var d = new LongListItem(li[i]);<br />
//li[i].onmousedown = d.onMouseDown.bindAsEventListener(d);<br />
var d = new Draggable(li[i], <br />
{revert: true,<br />
ghosting: false,<br />
scroll: "rightContainers"<br />
});<br />
}<br />
<br />
var divs = $("rightContainers").getElementsByTagName("div");<br />
for (i = 0; i < divs.length; i++) {<br />
if (divs[i].className && Element.hasClassName(divs[i], "container")) {<br />
Droppables.add(divs[i].id, {hoverclass: "hover", scrollingParent: "rightContainers"});<br />
}<br />
}<br />
Event.observe(window, "unload", cleanup, false);<br />
}<br />
</script><br />
<style type="text/css"><br />
html, body {<br />
margin:0; padding: 0;<br />
height: 100% !important;<br />
}<br />
body {<br />
position:relative;<br />
color: black;<br />
background-color: white;<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: small;<br />
}<br />
h1 {font-size:115%;}<br />
h2 {font-size: 110%;}<br />
h3 {font-size: 105%;}<br />
div, p, li, td {<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: small;<br />
}<br />
p {margin: 0 0 .7em 0; padding:0;}<br />
ul {<br />
position:relative;<br />
list-style: none;<br />
margin:0; padding:0;<br />
overflow: visible;<br />
}<br />
li {position:relative;}<br />
.instructions {font-style:italic;}<br />
#leftDiv {<br />
position: absolute;<br />
top: 0; left: 0; bottom: 0;<br />
width: 30%;<br />
margin: 0; padding: 7px;<br />
border-right: 2px solid #bb9;<br />
background-color: #eed;<br />
}<br />
#leftDiv li, #rightContainers div.container li {<br />
margin: 3px 0; padding: 3px 3em 3px 10px;<br />
border: 2px solid #456;<br />
background-color: #cde;<br />
cursor: move;<br />
}<br />
#rightContainers {<br />
padding: .5em;<br />
position: absolute;<br />
top: 0; bottom: 0; right: 0; left: 35%;<br />
overflow:auto;<br />
}<br />
#rightContainers div.container{<br />
background-color: #bb9;<br />
margin: 0 0 40px 0; padding: 0 0 1px 0;<br />
border: 2px solid #775;<br />
}<br />
#rightContainers div.container h2{<br />
margin:0; padding: 2px 1em 0 1em;<br />
text-align:center;<br />
}<br />
#rightContainers div.container ul {<br />
margin: 5px; padding: 0 3px;<br />
background-color: white;<br />
border: 1px solid black;<br />
}<br />
#rightContainers div.container ul.empty {<br />
padding: 3px 0;<br />
}<br />
#rightContainers div.hover {<br />
background-color: #eed;<br />
}<br />
</style><br />
<!--[if IE]><style type="text/css"><br />
#leftDiv {<br />
height: expression((document.body.clientHeight - 44) + "px");<br />
}<br />
#leftDiv ul{width:93%;}<br />
#leftDiv li div.count {<br />
right:4px;<br />
top:4px;<br />
}<br />
#rightContainers li a.remove {<br />
display:block;<br />
float:none;<br />
position:absolute;<br />
top: 4px;<br />
right: 1.6em; <br />
margin:0; padding:0 .2em;<br />
}<br />
</style><![endif]--><br />
</head><br />
<body><br />
<div id="leftDiv" class=""><br />
<form id="frmContinue" action="#" method="post"><br />
<p class="instructions">Shrink your window until the right-hand pane is scrollable.</p><br />
<p class="instructions">Drag from the list on left to groups on the right, force the right-hand pane to scroll.</p><br />
<input name="data" type="hidden" value=" "><br />
</form><br />
<ul id="masterList"><br />
<li id="drag1">One</li><br />
<li id="drag2">Two</li><br />
<li id="drag3">Three</li><br />
<li id="drag4">Four</li><br />
<li id="drag5">Five</li><br />
<li id="drag6">Six</li><br />
<li id="drag7">Seven</li><br />
<li id="drag8">Eight</li><br />
</ul><br />
</div><br />
<div id="rightContainers" class=""><br />
</form><br />
<div id="grp1" class="container"><br />
<h2><span id="grp1_name">Group 1</span></h2><br />
<ul id="grp1ul" class="empty"></ul><br />
</div><br />
<div id="grp2" class="container"><br />
<h2><span id="grp2_name">Group 2</span></h2><br />
<ul id="grp2ul" class="empty"></ul><br />
</div><br />
<div id="grp3" class="container"><br />
<h2><span id="grp3_name">Group 3</span></h2><br />
<ul id="grp3ul" class="empty"></ul><br />
</div><br />
<div id="grp4" class="container"><br />
<h2><span id="grp4_name">Group 4</span></h2><br />
<ul id="grp4ul" class="empty"></ul><br />
</div><br />
<div id="grp5" class="container"><br />
<h2><span id="grp5_name">Group 5</span></h2><br />
<ul id="grp5ul" class="empty"></ul><br />
</div><br />
<div id="grp6" class="container"><br />
<h2><span id="grp6_name">Group 6</span></h2><br />
<ul id="grp6ul" class="empty"></ul><br />
</div><br />
<div id="grp7" class="container"><br />
<h2><span id="grp7_name">Group 7</span></h2><br />
<ul id="grp7ul" class="empty"></ul><br />
</div><br />
<div id="grp8" class="container"><br />
<h2><span id="grp8_name">Group 8</span></h2><br />
<ul id="grp8ul" class="empty"></ul><br />
</div><br />
<div id="grp9" class="container"><br />
<h2><span id="grp9_name">Group 9</span></h2><br />
<ul id="grp9ul" class="empty"></ul><br />
</div><br />
</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a></div>
Admin