JavaScript DHTML/Scriptaculous/Drag Drop — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
|
Текущая версия на 10:26, 26 мая 2010
Содержание
- 1 Add delay to drag and drop
- 2 No delay sortable
- 3 Delayed sortable (500 ms)
- 4 No delay draggable
- 5 Delayed draggable (1000 ms)
- 6 script.aculo.us Drag and drop functional test file
- 7 script.aculo.us Drag and drop functional test file
- 8 script.aculo.us Drag and drop functional test file
- 9 script.aculo.us Drag and drop functional test file
- 10 script.aculo.us Drag and drop functional test file
- 11 script.aculo.us Drag and drop functional test file
Add delay to drag and drop
<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.8.2/lib/prototype.js"></script> <script type="text/javascript" src="scriptaculous-js-1.8.2/src/effects.js"></script> <script type="text/javascript" src="scriptaculous-js-1.8.2/src/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>
Drag and drop between two tables
<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.8.2/lib/prototype.js"></script> <script language="JavaScript" type="text/javascript" src="scriptaculous-js-1.8.2/src/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>
Drag and drop: force 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.8.2/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous-js-1.8.2/src/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>
Drag and drop: ghosting effect
<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.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/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>
Drag and drop: hover class
<source lang="html4strict">
<html>
<head>
<title>script.aculo.us Drag and drop functional test file</title>
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
<script src="scriptaculous-js-1.8.2/src/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="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>
Drag and drop: invert
<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.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/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; } </style>
</head> <body>
script.aculo.us Drag and drop functional test file
Draggables/Droppables
drag here
<input type="checkbox" id="shouldrevert1"/> Revert?
drag here
<input type="checkbox" id="shouldrevert2"/> Revert? I"ve onStart, onDrag and onEnd events!
This box overrides the default endeffect
This box overrides the default starteffect
This box overrides the default end- and starteffects
<script type="text/javascript" language="javascript" charset="utf-8">
new Draggable("revertbox1",{scroll:window,handle:"handle1",revert:function(element){return ($("shouldrevert1").checked)}}); new Draggable("revertbox2",{ handle:"handle2", revert:function(element){return ($("shouldrevert2").checked)}, onStart:function(){$("revertbox2").setStyle({backgroundColor:"#bfb"})}, onDrag:function(){$("event-info").update("drag!")}, onEnd:function(){alert("end!")} }); Droppables.add("droptarget1",{accept:["box1","otherstuff"],onDrop:function(){alert("drop!")}}); Droppables.add("droptarget2",{accept:"box",onDrop:function(){alert("drop!")}}); new Draggable("specialbox",{ endeffect:function(){ new Effect.Highlight("specialbox",{queue:"end"}); } }); new Draggable("specialbox2",{ starteffect:function(){ new Effect.Highlight("specialbox2",{queue:"end"}); } }); new Draggable("specialbox3",{ starteffect:function(){ new Effect.Highlight("specialbox3",{queue:"end"}); }, endeffect:function(){ new Effect.Highlight("specialbox3",{queue:"end"}); } });
</script>
</body> </html>
</source>
Drag and drop: snap
<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.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> <style type="text/css" media="screen"> div.box { background: green; width:100px; height:100px } div.box-container { background: yellow; width:200px; height:200px } </style>
</head> <body>
script.aculo.us Drag and drop functional test file
Draggables/Droppables
Normal box
snap: 25
snap: [5,25]
snap: procedural (e.g. constrain to box)
snap: procedural (e.g. constrain to parent element)
<script type="text/javascript" language="javascript" charset="utf-8">
new Draggable("box-normal",{snap:false,revert:true}); new Draggable("box-grid-numeric",{snap:25,revert:true}); new Draggable("box-grid-array",{snap:[5,25],revert:true}); new Draggable("box-grid-procedural",{ snap: function(x,y) { return[ x<100 ? (x > 0 ? x : 0 ) : 100, y<50 ? (y > 0 ? y : 0) : 50]; }, revert:true }); new Draggable("box-grid-procedural-gets-draggable",{ snap: function(x,y,draggable) { function constrain(n, lower, upper) { if (n > upper) return upper; else if (n < lower) return lower; else return n; } element_dimensions = Element.getDimensions(draggable.element); parent_dimensions = Element.getDimensions(draggable.element.parentNode); return[ constrain(x, 0, parent_dimensions.width - element_dimensions.width), constrain(y, 0, parent_dimensions.height - element_dimensions.height)]; }, revert:true });
</script>
</body> </html>
</source>
Drag and drop to reorder
<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.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/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; } </style>
</head> <body>
script.aculo.us Drag and drop functional test file
Draggables/Droppables
- Relatively here!
- <input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
<script type="text/javascript" language="javascript" charset="utf-8"> // Sortable.create("thelist", {overlap: "horizontal", constraint: false}); Position.includeScrollOffsets = true; Sortable.create("thelist2",{scroll:"scroll-container"});
</script> </body> </html>
</source>
Draggable handle
<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.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/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 (but not 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>
- Relatively here!
- <input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
- one
<script type="text/javascript" language="javascript" charset="utf-8"> // Sortable.create("thelist", {overlap: "horizontal", constraint: false}); Sortable.create("thelist"); Sortable.create("thelist2");
</script> </body> </html>
</source>
Draggable with scroll bar
<source lang="html4strict">
<html> <head> <title>Untitled Document</title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> <script type="text/javascript"> Event.observe(window, "load", function() {
new Draggable("my", { scroll: "container" });
});
</script> </head> <body>
A
Drag this around!
C
</body> </html>
</source>
Droppable target
<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.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> </head> <body>
Draggable
<script type="text/javascript"> new Draggable("source", { revert:"failure", onDropped: function(element){ $(element).update("I WAS DROPPED!") }, reverteffect: function(element, top_offset, left_offset) { var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02; new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur, transition: Effect.Transitions.spring, queue: {scope:"_draggable", position:"end"} }); } }); </script>
Good Target
<script type="text/javascript"> Droppables.add("target", { onDrop:function(element){ Effect.Puff($("source")); } }); </script>
</body>
</html>
</source>
Ghosting vs. non-ghosting
<source lang="html4strict">
<html> <head> <title>Untitled Document</title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> <script type="text/javascript"> Event.observe(window, "load", function() {
new Draggable("regular"); new Draggable("ghostly", { ghosting: true });
});
</script> </head> <body>
This drags regularly
This drags with ghosting
</body> </html>
</source>