JavaScript DHTML/Ajax Layer/Drag Effects
Содержание
Delayed draggable and Delayed sortable
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>script.aculo.us functional test</title> <script type="text/javascript" src="./scriptaculous-js-1.6.4src/prototype.js"></script> <script type="text/javascript" src="./scriptaculous-js-1.6.4src/effects.js"></script> <script type="text/javascript" src="./scriptaculous-js-1.6.4src/dragdrop.js"></script> <script type="text/javascript"> var myStartEffect = function(element) { element._opacity = Element.getOpacity(element); new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7}); new Effect.Highlight(element, {}); } </script> <style type="text/css"> h1 {font-size: 1.2em; text-align:center;} li { margin: 5px auto; padding: 2px; width: 200px; text-align:center; list-style-type:none; border: 2px solid #779; background-color: #dde } div { margin: 5px auto; padding: 2px; width: 300px; text-align:center; border: 2px solid #797; background-color: #ded } </style>
</head> <body>
No delay sortable
- one
- two
- three
Delayed sortable (500 ms)
- one
- two
- three
No delay draggable
Lorem ipsum
Delayed draggable (1000 ms)
Lorem ipsum
<script type="text/javascript" charset="utf-8"> Sortable.create("sort1", {starteffect: myStartEffect}); Sortable.create("sort2", {starteffect:myStartEffect, delay:500}); new Draggable("drag1", {starteffect:myStartEffect}); new Draggable("drag2", {starteffect:myStartEffect, delay:1000}); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Drag from this table, Drop on this table
<source lang="html4strict">
<html>
<head>
<title>Drag & Drop</title>
<style type="text/css">
td
{
width: 10em; text-align: center;
} table.mytable {
list-style-type: none; padding: 4px 4px 0 4px; margin: 0px; font-size: 13px; font-family: Arial, sans-serif;
} table.mytable tr {
margin-bottom: 4px; padding: 2px 2px; border: 1px solid #c00; background-color: #eee;
} div.draggable {
cursor:move; padding:2px; background-color: #BBCCDD;
} div.dropsite {
padding:2px; background-color: #DDBB99;
} div.hoverclass123 {
border:1px solid red;
} </style> <script language="JavaScript" type="text/javascript" src="./scriptaculous-js-1.6.4src/prototype.js"></script> <script language="JavaScript" type="text/javascript" src="./scriptaculous-js-1.6.4src/scriptaculous.js"></script> <script language="JavaScript" type="text/javascript"> Position.includeScrollOffsets = true; window.onload = function() {
var t1 = document.getElementById("t1"); add_divs(t1, "td", "draggable"); var trs = t1.getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { var divs = document.getElementsByClassName("draggable", trs[i]); var drag_text = divs[2].innerHTML; for (var j = 0; j < divs.length; ++j) { new Draggable(divs[j], {ghosting:true, revert:true}); } } var t2 = document.getElementById("t2"); add_divs(t2, "td", "dropsite"); var divs = document.getElementsByClassName("dropsite", t2); for (var j = 0; j < divs.length; ++j) { Droppables.add(divs[j], {accept:"draggable", hoverclass:"hoverclass123", onDrop:function(element, dropon, event) { debug("dropped " + element.innerHTML + " on " + dropon.innerHTML + "\n")}}); }
}; function debug(text) {
document.getElementById("debug").innerHTML= "
" + text + "";
} function add_divs(table, tag, classname) {
var items = table.getElementsByTagName(tag); for (var i = 0; i < items.length; i++) items[i].innerHTML ="
}
</script> </head> <body>
Drag from this table:
one | 1 | uno |
two | 2 | dos |
three | 3 | tres |
four | 4 | quatro |
five | 5 | cinco |
six | 6 | seis |
seven | 7 | siete |
eight | 8 | ocho |
nine | 9 | nueve |
ten | 10 | diez |
<p>Drop on this table:
eleven | 11 | once |
twelve | 12 | doce |
thirteen | 13 | trece |
fourteen | 14 | catorce |
fifteen | 15 | quince |
sixteen | 16 | dieciseis |
seventeen | 17 | diecisiete |
eightteen | 18 | dieciocho |
nineteen | 19 | diecinueve |
twenty | 20 | veinte |
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Drag hover effects
<source lang="html4strict">
<html> <head> <title>script.aculo.us Drag and drop functional test file</title> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script> </head> <style>
div.hoverclass123 { border:1px solid red; }
</style> <body>
script.aculo.us Drag and drop functional test file
w/o hoverclass
- DROP HERE ###
<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>
<img alt="Product2" id="product_id" src="./scriptaculous-js-1.6.4src/icon.png" /> <-- drag this!
<script type="text/javascript">new Draggable("product_id", {revert:true})</script>
w/ hoverclass
- DROP HERE ###
<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>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Ghost effect for dragging
<source lang="html4strict">
<!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 Drag and drop functional test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
</head> <body style="background-color:#eee;">
(inside position:relative container)
script.aculo.us Drag and drop functional test file
Draggables/Droppables
Ghosting effect <input type="text" value="blah"/>
<a href="#" onclick="alert($("hurradiegams").innerHTML); return false;">alert contents of test div</a>
Ghost effect
<script type="text/javascript" language="javascript" charset="utf-8">
Position.includeScrollOffsets = true; new Draggable("absolute_positioned_element",{ghosting: true}); new Draggable("absolute_positioned_element2",{ghosting: true, revert:true});
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Hide component during dragging
<source lang="html4strict">
<!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 Drag and drop functional test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script> <style type="text/css" media="screen"> #thelist li { background: green; margin:5px; padding: 30px; } #thelist2 li { background: #ffb; margin:2px; padding: 2px; } #revertbox2 { position:absolute;top:40px;left:50px;z-index:1000;width:150px;height:150px;background:#bbf; } </style>
</head> <body>
script.aculo.us Drag and drop functional test file
Draggables/Droppables
<a href="#" onclick="alert($H(Sortable.sortables).inspect());return false">inspect sortables</a>
drag here
<input type="checkbox" id="shouldrevert1"/> Revert?
drag here
<input type="checkbox" id="shouldrevert2"/> Revert?
<script type="text/javascript" language="javascript" charset="utf-8">
new Draggable("revertbox1",{scroll:window,zindex:-5,handle:"handle1",revert:function(element){return ($("shouldrevert1").checked)}}); new Draggable("revertbox2",{scroll:window,handle:"handle2",revert:function(element){return ($("shouldrevert2").checked)}}); Droppables.add("xxxx",{accept:["box1","box2"],onDrop:function(){alert("drop!")}});
</script>
- Hey there! I"m absolutely positioned
- one
<form id="form1"><input type="checkbox" onclick="this.checked = !this.checked" value="x" name="x" id="xyz"/><input type="text" id="xxx"></input></form> - two
<form id="form2"><input type="text" id="xyx"></input></form> - three
<form id="form3"><input type="text" id="xu3"></input></form>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>
Using drag and move to force the right-hand pane to scroll
<source lang="html4strict">
<!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="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script type="text/javascript"> 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>
</head> <body>
<form id="frmContinue" action="#" method="post">
Shrink your window until the right-hand pane is scrollable.
Drag from the list on left to groups on the right, force the right-hand pane to scroll.
<input name="data" type="hidden" value=" "> </form>
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
</form>
Group 1
Group 2
Group 3
Group 4
Group 5
Group 6
Group 7
Group 8
Group 9
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>