JavaScript DHTML/Scriptaculous/Sortable — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
|
Текущая версия на 10:26, 26 мая 2010
Содержание
drag and drop to sort
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head> <title>Draggable demo</title> <style type="text/css" media="screen"> body { font-family: "Trebuchet MS", sans-serif; } #container { width: 200px; list-style-type: none; margin-left: 0; padding-left: 0; } #container li, .foo { background-color: #f9f9f9; border: 1px solid #ccc; padding: 3px 5px; padding-left: 0; margin: 10px 0; } #container li .handle { background-color: #090; color: #fff; font-weight: bold; padding: 3px; } #container, #drop_zone { width: 200px; height: 300px; list-style-type: none; margin-left: 0; margin-right: 20px; float: left; padding: 0; border: 2px dashed #999; } </style> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript" charset="utf-8"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> document.observe("dom:loaded", function() { Sortable.create("container", { scroll: window }); }); </script> </head> <body>
- Lorem
- Ipsum
- Dolor
- Sit
- Amet
</body>
</html>
</source>
Horizontally Sortable
<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() {
Sortable.create("myList", { constraint: "horizontal", overlap: "horizontal" });
}); </script> <style>
- myList {
list-style-type: none; padding: 0;
}
- myList li {
float: left; cursor: move; margin-left: 1em; padding: 0.2em; width: 10em; border: 0.05em solid gray; background: #ddd; text-align: center;
}
</style> </head> <body>
- A
- B
- C
- D
- E
</body> </html>
</source>
Sortabled list with handlers
<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 sortable 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> <link rel="stylesheet" href="../test.css" type="text/css" /> <style type="text/css" media="screen"> ul.sortablelist { list-style-image:none; list-style-type:none; margin-top:5px; margin:0px; padding:0px; } ul.sortabledemo li { padding:0px; margin:0px; } span.handle { background-color: #E8A400; color:white; cursor: move; } li.green { background-color: #ECF3E1; border:1px solid #C5DEA1; cursor: move; } li.orange { border:1px solid #E8A400; background-color: #FFF4D8; } </style>
</head> <body>
script.aculo.us: Two floating sortables with containment and dropOnEmpty
This is the first list
- Item 1 from first list.
- Item 2 from first list.
- Item 3 from first list.
And now the second list
- DRAG HERE Item 1 from second list.
- DRAG HERE Item 2 from second list.
- DRAG HERE Item 3 from second list.
<script type="text/javascript"> Sortable.create("firstlist", {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false, onChange:function(){$("firstlist_debug").innerHTML = Sortable.serialize("firstlist") }}); Sortable.create("secondlist", {dropOnEmpty:true,handle:"handle",containment:["firstlist","secondlist"],constraint:false, onChange:function(){$("secondlist_debug").innerHTML = Sortable.serialize("secondlist") }}); </script> </body> </html> </source>
Sortable is Not just for lists
<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() {
Sortable.create("chapter", { tag: "p", only: ["orderable", "moveIt"] });
}); </script> </head> <body>
This stays on top.
Sortable.
And this too!
sortable.
This stays at bottom.
</body> </html>
</source>
Sortable list updated event
<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 sortable 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> <link rel="stylesheet" href="../test.css" type="text/css" />
</head> <body>
<script type="text/javascript" language="javascript" charset="utf-8">
var new_ul_id = "new_id_123"; var ul = document.createElement("ul"); var ul_id = document.createAttribute("id"); ul_id.nodeValue = new_ul_id; ul.setAttributeNode(ul_id); var li = document.createElement("li"); li.setAttribute("id", "test_1"); li.appendChild(document.createTextNode("blah1")); ul.appendChild(li); var li2 = document.createElement("li"); li2.setAttribute("id", "test_2"); li2.appendChild(document.createTextNode("blah2")); ul.appendChild(li2); $("container_div").appendChild(ul); Sortable.create(new_ul_id, { onUpdate: function() { alert(Sortable.serialize("new_id_123")); } });
</script> </body> </html>
</source>
Sortable onChange event and onUpdate event
<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() {
var changeEffect; Sortable.create("myList", { onChange: function(item) { var list = Sortable.options(item).element; alert(Sortable.serialize(list).escapeHTML()); if (changeEffect) changeEffect.cancel(); changeEffect = new Effect.Highlight("changeNotif", { restorecolor: "transparent" }); }, onUpdate: function(list) { alert(Sortable.serialize(list).escapeHTML()); } });
}); </script> </head> <body>
- A
- B
- C
- D
- E
</body> </html>
</source>
Sortable two-lists
<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 sortable 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> <link rel="stylesheet" href="../test.css" type="text/css" /> <style type="text/css" media="screen"> ul { height: 100px; border:1px dotted #888; } </style>
</head> <body>
script.aculo.us Sortable two-lists w/ dropOnEmpty functional test file
- Hey there! I"m item#1/1
- Hey there! I"m item#1/2
- Hey there! I"m item#1/3
<script type="text/javascript" language="javascript" charset="utf-8">
Sortable.create("thelist1",{containment:["thelist1","thelist2"], dropOnEmpty:true}); Sortable.create("thelist2",{containment:["thelist1","thelist2"], dropOnEmpty:true});
</script> <a href="#" onclick="alert(Sortable.serialize("thelist1"));return false;">Serialize sortable1</a> <a href="#" onclick="alert(Sortable.serialize("thelist2"));return false;">Serialize sortable2</a>
</body> </html>
</source>
Sortable with ghosting effects
<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 Sortable ghosting 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> <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>
script.aculo.us Sortable ghosting functional test file
Ghosting
- <img src="icon.png" alt=""/> Lorem ipsum dolor
- <img src="icon.png" alt=""/> sit amet
- <img src="icon.png" alt=""/> consectetur adipisicing
- <img src="icon.png" alt=""/> elit
- <img src="icon.png" alt=""/> sed do eiusmod
- <img src="icon.png" alt=""/> tempor incididunt
- <img src="icon.png" alt=""/> ut labore et dolore
- <img src="icon.png" alt=""/> magna aliqua
(waiting for onChange)
<script type="text/javascript" language="javascript" charset="utf-8">
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>
No ghosting
- <img src="icon.png" alt=""/> Lorem ipsum dolor
- <img src="icon.png" alt=""/> sit amet
- <img src="icon.png" alt=""/> consectetur adipisicing
- <img src="icon.png" alt=""/> elit
- <img src="icon.png" alt=""/> sed do eiusmod
- <img src="icon.png" alt=""/> tempor incididunt
- <img src="icon.png" alt=""/> ut labore et dolore
- <img src="icon.png" alt=""/> magna aliqua
(waiting for onChange)
<script type="text/javascript" language="javascript" charset="utf-8">
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>
Ghosting (inside position:relative container)
- <img src="icon.png" alt=""/> Lorem ipsum dolor
- <img src="icon.png" alt=""/> sit amet
- <img src="icon.png" alt=""/> consectetur adipisicing
- <img src="icon.png" alt=""/> elit
- <img src="icon.png" alt=""/> sed do eiusmod
- <img src="icon.png" alt=""/> tempor incididunt
- <img src="icon.png" alt=""/> ut labore et dolore
- <img src="icon.png" alt=""/> magna aliqua
(waiting for onChange)
<script type="text/javascript" language="javascript" charset="utf-8">
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>
Ghosting (inside position:relative container)
- <img src="icon.png" alt=""/> Lorem ipsum dolor
- <img src="icon.png" alt=""/> sit amet
- <img src="icon.png" alt=""/> consectetur adipisicing
- <img src="icon.png" alt=""/> elit
- <img src="icon.png" alt=""/> sed do eiusmod
- <img src="icon.png" alt=""/> tempor incididunt
- <img src="icon.png" alt=""/> ut labore et dolore
- <img src="icon.png" alt=""/> magna aliqua
(waiting for onChange)
<script type="text/javascript" language="javascript" charset="utf-8">
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>
</body> </html>
</source>
Sort and reorder the ordered list
<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() {
Sortable.create("guys");
}); </script> </head> <body>
- A
- B
- C
- D
- E
</html>
</source>
Two sortable groups
<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() {
var options = { constraint: false, containment: ["myList", "myList2"], dropOnEmpty: true, onUpdate: function(list) { var methodStart = list.down("li") ? "remove" : "add"; list[methodStart + "ClassName"]("empty"); } }; Sortable.create("myList", options); Sortable.create("myList2", options);
}); </script> </head> <body>
- A
- B
- C
- D
- E
- F
</body> </html>
</source>