✔ sortable list mit unterlisten funktioniert nicht?
- Themenstarter mogmog
- Beginndatum
Sven Mintel
Mitglied
So, hier ist es
An der rot markierten Stelle werden in alle <ul>, welche kein <li> enthalten, beim Initialisieren und nach jedem Sortiervorgang leere <li> eingefügt.
Das Starten des Ganzen erfolgt etwas anders, die Optionen werden einer Funktion übergeben(grün markiert).
Der Selektor wird auch über die Optionen übergeben(blau markiert).
Bei Bedarf können der Funktion mehrere Parameter übergeben werden, falls mehrere Sachen in der Seite sortierbar gemacht werden sollen.
Code:
<html>
<head>
<title>test</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui_002.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript">
(
function(ns)
{
var _this={ 'objs':[],
'init':function()
{
for(var i=0;i<arguments.length;++i)
{
this.objs.push(arguments[i]);
}
return this;
},
'load':function()
{
while(this.objs.length)
{
var obj=this.objs.shift();
obj.update=this.update;
this.update($(obj.selector))
.sortable(obj)
.disableSelection();
}
},
update:function(e,ui)
{
var target=(typeof e.target=='undefined')
?$(e)
:$(e.target);
//DUMMY <li> einfügen
target.find('ul:not(:has(li))').append('<li class="dummy" style="visibility:hidden"><br></li>');
//überflüssigeDUMMIES entfernen
target.find('li.dummy:not(:only-child)').remove();
return target;
}
};
window[ns]=_this;
$(window).load(function(){window[ns].load()});
return window[ns];
}
)('fx').init(
{
selector:'#menu',
containment:'ul',
placeholder: 'helper',
helper: 'clone',
items:'ul li',
forcePlaceholderSize: true,
forceHelperSize: true,
opacity:0.7,
cursor:'move',
cursorAt:'top'
}
);
</script>
<style type="text/css">
html,body{
height:100%;
}
#menu .helper {
border:1px dashed #666;
margin:2px;
padding:2px;
height:10px;
background:#e1e1e1 ;
list-style-type:disc;
}
#menu,
#menu dummy,
#menu li{
list-style:none;
}
#menu ul,#menu ul li{
width:100px;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<ul>
<li>#1
<ul>
<li>
#1_1<ul></ul>
</li>
</ul>
</li>
<li>#2
<ul>
<li>#2_1
<ul>
<li>#2_1_1
<ul></ul>
</li>
</ul>
</li>
<li>#2_2
<ul>
<li>#2_2_1
<ul></ul>
</li>
<li>#2_2_2
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
<li>#3
<ul>
<li>#3_1
<ul>
<li>
#3_1_1
</li>
<li>
#3_1_2
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>An der rot markierten Stelle werden in alle <ul>, welche kein <li> enthalten, beim Initialisieren und nach jedem Sortiervorgang leere <li> eingefügt.
Das Starten des Ganzen erfolgt etwas anders, die Optionen werden einer Funktion übergeben(grün markiert).
Der Selektor wird auch über die Optionen übergeben(blau markiert).
Bei Bedarf können der Funktion mehrere Parameter übergeben werden, falls mehrere Sachen in der Seite sortierbar gemacht werden sollen.
