mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
130 lines
3.1 KiB
HTML
130 lines
3.1 KiB
HTML
|
<!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">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||
|
|
<title>Untitled Document</title>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||
|
|
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||
|
|
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||
|
|
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||
|
|
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
|
||
|
|
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(document).ready(function(){
|
||
|
|
|
||
|
|
|
||
|
|
$.widget("ui.tree", {
|
||
|
|
init: function() {
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
this.element.sortable({
|
||
|
|
items: this.options.sortOn,
|
||
|
|
placeholder: "ui-tree-placeholder",
|
||
|
|
start: function() {
|
||
|
|
$(this).data("sortable").placeholder.hide();
|
||
|
|
$(this).data("sortable").refreshPositions(true);
|
||
|
|
},
|
||
|
|
stop: function() {
|
||
|
|
var self = $(this).data("sortable");
|
||
|
|
$(self.options.items, self.element).css("border-top", "0").css("border-bottom", "0");
|
||
|
|
},
|
||
|
|
sortIndicator: function(e, item, append, hardRefresh) {
|
||
|
|
|
||
|
|
append ? append[0].appendChild(this.placeholder[0]) : item.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction == 'down' ? item.item[0] : item.item[0].nextSibling));
|
||
|
|
|
||
|
|
$(this.options.items, this.element).css("border-top", "0").css("border-bottom", "0");
|
||
|
|
item.item.css("border-"+(this.direction == "down" ? "top" : "bottom"), "2px solid black");
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//Make certain nodes droppable
|
||
|
|
$(this.options.dropOn, this.element).droppable({
|
||
|
|
accept: this.options.sortOn,
|
||
|
|
hoverClass: this.options.hoverClass,
|
||
|
|
//tolerance: "pointer",
|
||
|
|
over: function() {
|
||
|
|
$(self.options.sortOn, self.element).css("border-top", "0").css("border-bottom", "0");
|
||
|
|
},
|
||
|
|
drop: function(e, ui) {
|
||
|
|
$(this).parent().find("ul").append(ui.draggable);
|
||
|
|
self.element.data("sortable")._noFinalSort = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$.extend($.ui.tree, {
|
||
|
|
defaults: {
|
||
|
|
sortOn: "*",
|
||
|
|
dropOn: "div",
|
||
|
|
hoverClass: "ui-tree-hover"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$("ul.sortable").tree({
|
||
|
|
sortOn: "li",
|
||
|
|
dropOn: "div",
|
||
|
|
hoverClass: "hover"
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
body {
|
||
|
|
background:#fff;
|
||
|
|
color:#333;
|
||
|
|
font-size:11px;
|
||
|
|
font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hover {
|
||
|
|
background: green;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.placeholder {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<ul class="sortable">
|
||
|
|
<li>Item 1</li>
|
||
|
|
<li><div>Item 2</div>
|
||
|
|
<ul>
|
||
|
|
<li>Sub Item 1</li>
|
||
|
|
<li>Sub Item 3</li>
|
||
|
|
<li>Sub Item 4</li>
|
||
|
|
<li>Sub Item 5</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>Item 3</li>
|
||
|
|
<li>Item 4</li>
|
||
|
|
<li><div>Item 2</div>
|
||
|
|
<ul>
|
||
|
|
<li>Sub Item 1</li>
|
||
|
|
<li>Sub Item 3</li>
|
||
|
|
<li>Sub Item 4</li>
|
||
|
|
<li>Sub Item 5</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>Item 6</li>
|
||
|
|
<li>Item 7</li>
|
||
|
|
<li>Item 8</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|