JavaScript DHTML/Mootools/Sortable
Содержание
Sortables Demo
<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" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style rel="stylesheet" type="text/css">
div.floated {
width: 400px; float: left; margin-left: 1em;
} ul.myList {
margin-left: 20px;
} ul.myList li {
cursor: pointer;
} ul.anotherList {
width: 200px; float: left; border: 1px solid black; background-color: #f9f9f9; min-height: 20px; margin: 5px; padding-left: 20px;
} ul.anotherList li {
margin-left: 10px; list-style-type: decimal;
} ul.anotherList li:hover {
background-color: #fff;
}
</style> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript">
window.addEvent("domready", function(){
// We autogenerate a list on the fly
var li = [];
for (i = 1; i <= 5; i++)
li.push(new Element("li", {
text: "Item #"+i
}));
var ul = new Element("ul", {
"class": "myList"
}).inject("sortablesDemo").adopt(li);
// First Example
new Sortables(ul);
// Second Example
// We just clone the list we created before
var uls = $$([ul.clone(), ul.clone()])
uls[1].getElements("li").setStyle("font-weight", "bold");
uls.inject("anotherSortablesDemo").addClass("anotherList");
new Sortables(uls, {
revert: true
});
});
</script> <title>Sortables Demo</title>
</head> <body>
Sortables
Introduction
Back in the 90s you sorted items in a list with arrows up/down or maybe even with input-fields where you specified the item"s position. But now you have the Sortables-Plugin, which comes in handy when you are using one or more lists and need the user to sort them.
Advanced Example
The advanced example shows, that it is even possible to drag&drop list-elements into another list.
</body> </html>
</source>
This To Do list is a good example of using Sortables in lists which have items dynamically added
<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" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">
- addTask {
width: 490px; margin: 10px; background: #efefef; border: 1px solid #a7a7a7; text-align: center; padding: 5px;
}
- todo li .drag-handle {
cursor: pointer;
width: 16px;
height: 16px;
background: url("move.png") no-repeat center;
float: left;
margin-right: 5px;
}
- todo {
list-style: none; border: 1px solid #ccc; margin: 10px auto 10px auto; width: 75%; padding: 10px 5% 10px 5%;
}
- listArea {
width: 500px; border: 1px solid #ccc; background: #efefef; margin: 10px;
}
</style> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript">
window.addEvent("domready", function() {
//This is the function that will run every time a new item is added or the
//list is sorted.
var showNewOrder = function() {
//This function means we get serialize() to tell us the text of each
//element, instead of its ID, which is the default return.
var serializeFunction = function(el) { return el.get("text"); };
//We pass our custom function to serialize();
var orderTxt = sort.serialize(serializeFunction);
//And then we add that text to our page so everyone can see it.
$("data").set("text", orderTxt.join(" "));
};
//This code initalizes the sortable list.
var sort = new Sortables(".todo", {
handle: ".drag-handle",
//This will constrain the list items to the list.
constrain: true,
//We"ll get to see a nice cloned element when we drag.
clone: true,
//This function will happen when the user "drops" an item in a new place.
onComplete: showNewOrder
});
//This is the code that makes the text input add list items to the - ,
//which we then make sortable.
var i = 1;
$("addTask").addEvent("submit", function(e) {
e.stop();
//Get the value of the text input.
var val = $("newTask").get("value");
//The code here will execute if the input is empty.
if (!val) {
$("newTask").highlight("#f00").focus();
return; //Return will skip the rest of the code in the function.
}
//Create a new
- to hold all our content. var li = new Element("li", {id: "item-"+i, text:val}); //This handle element will serve as the point where the user "picks up" //the draggable element. var handle = new Element("div", {id:"handle-"+i, "class":"drag-handle"}); handle.inject(li, "top"); //Set the value of the form to "", since we"ve added its value to the
- . $("newTask").set("value", ""); //Add the
- to our list. $("todo").adopt(li); //Do a fancy effect on the
- .
li.highlight();
//We have to add the list item to our Sortable object so it"s sortable.
sort.addItems(li);
//We put the new order inside of the data div.
showNewOrder();
i++;
});
});
</script>
<title>Dynamic Sortables Demo</title>
</head>
<body>
Dynamic Sortables
Introduction
This To Do list is a good example of using Sortables in lists which have items dynamically added. Notice that on line 47 of the JavaScript file, we make a call to sort.addItems(). It is critical that we call this method on our Sortables object every time we add a new item to the list.
My To Do List
<form id="addTask"> <input type="text" id="newTask" /> <input type="submit" value="Add Task" /> </form>
<div id="data"/>
</body> </html>
</source>
