Bonjour,
Voilà j'utilise un liste (sous forme le ul /li) avec aussi des liens <a> dans les li.
C'est une liste sortable (utilisant mootools 1.11 / nested.js)
Le problème c'est que cà existe mon lien <a> quand je drop ma li, ce que je ne veux pas, mais je n'arrive pas à arreter l'evenement correctement.
Soit je desactive completement le on click sur le a, soit cà ne fait rien
Si quelqu'un a une idée.
Merci
page HTML :
Voilà j'utilise un liste (sous forme le ul /li) avec aussi des liens <a> dans les li.
C'est une liste sortable (utilisant mootools 1.11 / nested.js)
Le problème c'est que cà existe mon lien <a> quand je drop ma li, ce que je ne veux pas, mais je n'arrive pas à arreter l'evenement correctement.
Soit je desactive completement le on click sur le a, soit cà ne fait rien
Si quelqu'un a une idée.
Merci
page HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Mootools - Sortable nested lists</title>
<style type="text/css">
* {margin:0; padding:0;}
hr {margin: 20px;}
html {font-size: 90%; font-family:verdana; padding: 50px;}
li {margin-left:3em; cursor:move; padding: 5px;}
li img {cursor: pointer;}
.drag {background-color:#ccc;}
.remove {color: #ddd;}
</style>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
// Version: 1.20
// Date: 2007-01-25
// Author: CrazyDave
// Website: http://www.clanccc.co.uk/moo/nested.html
var Nested = new Class({
getOptions: function() {
return {
childTag: 'LI',
ghost: true,
childStep: 30, // attempts to become a child if the mouse is moved this number of pixels right
handleClass: null,
onStart: Class.empty,
onComplete: Class.empty,
collapse: false, // true/false
collapseClass: 'nCollapse', // Class added to collapsed items
expandKey: 'shift', // control | shift
lock: null, // parent || depth || class
lockClass: 'unlocked'
};
},
initialize: function(list, options) {
this.setOptions(this.getOptions(), options);
if (!this.options.expandKey.match(/^(control|shift)$/)) {
this.options.expandKey = 'shift';
}
this.list = $(list);
this.options.parentTag = this.list.nodeName;
this.bound = {};
this.bound.start = this.start.bindWithEvent(this);
this.list.addEvent('mousedown', this.bound.start);
if (this.options.collapse) {
this.bound.collapse = this.collapse.bindWithEvent(this);
//this.list.addEvent('click', this.bound.collapse);
}
if (this.options.initialize) this.options.initialize.call(this);
},
start: function(event) {
var el = $(event.target);
if (this.options.handleClass) {
while (el.nodeName != this.options.childTag && !el.hasClass(this.options.handleClass) && el != this.list) {
el = el.getParent();
}
if (!el.hasClass(this.options.handleClass)) return true;
}
while (el.nodeName != this.options.childTag && el != this.list) {
el = el.parentNode;
}
if (el.nodeName != this.options.childTag) return true;
el = $(el);
if (this.options.lock == 'class' && !el.hasClass(this.options.lockClass)) return;
if (this.options.ghost) { // Create the ghost
this.ghost = el.clone().setStyles({
'list-style-type': 'none',
'opacity': 0.5,
'position': 'absolute',
'visibility': 'hidden',
'top': event.page.y+'px',
'left': (event.page.x+10)+'px'
}).injectInside(document.body);
}
el.depth = this.getDepth(el);
el.moved = false;
this.bound.movement = this.movement.bindWithEvent(this, el);
this.bound.end = this.end.bind(this, el);
this.list.removeEvent('mousedown', this.bound.start);
this.list.addEvent('mousedown', this.bound.end);
this.list.addEvent('mousemove', this.bound.movement);
document.addEvent('mouseup', this.bound.end);
if (window.ie) { // IE fix to stop selection of text when dragging
this.bound.stop = this.stop.bindWithEvent(this);
$(document.body).addEvent('drag', this.bound.stop).addEvent('selectstart', this.bound.stop);
}
this.fireEvent('onStart', el);
event.stop();
},
collapse: function(event) {
var el = $(event.target);
if (this.options.handleClass) {
while (el.nodeName != this.options.childTag && !el.hasClass(this.options.handleClass) && el != this.list) {
el = el.getParent();
}
if (!el.hasClass(this.options.handleClass)) return true;
}
while (el.nodeName != this.options.childTag && el != this.list) {
el = el.parentNode;
}
if (el == this.list) return;
el = $(el);
if (!el.moved) {
var sub = $E(this.options.parentTag, el);
if (sub) {
if (sub.getStyle('display') == 'none') {
sub.setStyle('display', 'block');
el.removeClass(this.options.collapseClass);
} else {
sub.setStyle('display', 'none');
el.addClass(this.options.collapseClass);
}
}
}
event.stop();
},
stop: function(event) {
event.stop();
return false;
},
getDepth: function(el, add) {
var counter = (add) ? 1 : 0;
while (el != this.list) {
if (el.nodeName == this.options.parentTag) counter += 1;
el = el.parentNode;
}
return counter;
},
movement: function(event, el) {
var dir, over, check, items;
var dest, move, prev, prevParent;
var abort = false;
if (this.options.ghost && el.moved) { // Position the ghost
this.ghost.setStyles({
'position': 'absolute',
'visibility': 'visible',
'top': event.page.y+'px',
'left': (event.page.x+10)+'px'
});
}
over = event.target;
while (over.nodeName != this.options.childTag && over != this.list) {
over = over.parentNode;
}
if (over == this.list) return;
if (event[this.options.expandKey] && over != el && over.hasClass(this.options.collapseClass)) {
check = $E(this.options.parentTag, over);
over.removeClass(this.options.collapseClass);
check.setStyle('display', 'block');
}
// Check if it's actually inline with a child element of the event firer
orig = over;
if (el != over) {
items = $ES(this.options.childTag, over);
items.each(function(item) {
if (event.page.y > item.getTop() && item.offsetHeight > 0) over = item;
});
}
// Make sure we end up with a childTag element
if (over.nodeName != this.options.childTag) return;
// store the previous parent 'ol' to remove it if a move makes it empty
prevParent = el.getParent();
dir = (event.page.y < el.getTop()) ? 'up' : 'down';
move = 'before';
dest = el;
if (el != over) {
check = over;
while (check != null && check != el) {
check = check.parentNode;
} // Make sure we're not trying to move something below itself
if (check == el) return;
if (dir == 'up') {
move = 'before'; dest = over;
} else {
sub = $E(this.options.childTag, over);
if (sub && sub.offsetHeight > 0) {
move = 'before'; dest = sub;
} else {
move = 'after'; dest = over;
}
}
}
// Check if we're trying to go deeper -->>
prev = (move == 'before') ? dest.getPrevious() : dest;
if (prev) {
move = 'after';
dest = prev;
check = $E(this.options.parentTag, dest);
while (check && event.page.x > check.getLeft() && check.offsetHeight > 0) {
dest = check.getLast();
check = $E(this.options.parentTag, dest);
}
if (!check && event.page.x > dest.getLeft()+this.options.childStep) {
move = 'inside';
}
}
last = dest.getParent().getLast();
while (((move == 'after' && last == dest) || last == el) && dest.getParent() != this.list && event.page.x < dest.getLeft()) {
move = 'after';
dest = $(dest.parentNode.parentNode);
last = dest.getParent().getLast();
}
abort = false;
if (move != '') {
abort += (dest == el);
abort += (move == 'after' && dest.getNext() == el);
abort += (move == 'before' && dest.getPrevious() == el);
abort += (this.options.lock == 'depth' && el.depth != this.getDepth(dest, (move == 'inside')));
abort += (this.options.lock == 'parent' && (move == 'inside' || dest.parentNode != el.parentNode));
abort += (dest.offsetHeight == 0);
sub = $E(this.options.parentTag, over);
sub = (sub) ? sub.getTop() : 0;
sub = (sub > 0) ? sub-over.getTop() : over.offsetHeight;
abort += (event.page.y < (sub-el.offsetHeight)+over.getTop());
if (!abort) {
if (move == 'inside') dest = new Element(this.options.parentTag).injectInside(dest);
$(el).inject(dest, move);
el.moved = true;
if (!prevParent.getFirst()) prevParent.remove();
}
}
this.fireEvent('onDrag', el);
event.stop();
},
detach: function() {
this.list.removeEvent('mousedown', this.start.bindWithEvent(this));
if (this.options.collapse) this.list.removeEvent('click', this.bound.collapse);
},
serialize: function(listEl) {
var serial = [];
var kids;
if (!listEl) listEl = this.list;
$$(listEl.childNodes).each(function(node, i) {
kids = $E(this.options.parentTag, node);
serial[i] = {
id: node.id,
action: node.getProperty('class'),
title: node.title,
children: (kids) ? this.serialize(kids) : []
};
}.bind(this));
return serial;
},
end: function(el) {
if (this.options.ghost) this.ghost.remove();
this.list.removeEvent('mousemove', this.bound.movement);
document.removeEvent('mouseup', this.bound.end);
this.list.removeEvent('mousedown', this.bound.end);
this.list.addEvent('mousedown', this.bound.start);
this.fireEvent('onComplete', el);
if (window.ie) $(document.body).removeEvent('drag', this.bound.stop).removeEvent('selectstart', this.bound.stop);
}
});
Nested.implement(new Events);
Nested.implement(new Options);
</script>
<script type="text/javascript">
//<![CDATA[
var sortIt;
window.onDomReady(function() {
sortIt = new Nested('example', {
collapse: true,
onDrag: function(el) {
},
onStart: function(el) {
el.addClass('drag');
var els = el.getChildren();
els.each(function(element){
element.onclick=function(event){
return false;
};
});
},
onComplete: function(el) {
el.removeClass('drag');
var els = el.getChildren();
els.each(function(element){
var clk = element.getProperty('onclick');
element.onclick=function(event){
alert(event.type);
if('mouseup'!= event)
eval(clk);
};
});
}
});
});
//]]>
</script>
</head>
<body>
Example:
<ul id="example">
<li id="item1"><a href="#" onClick="alert('toto')">Item 1</a></li>
<li id="item2">Item 2</li>
<li id="item3">Item 3
<ul>
<li id="item6">Item 3.1</li>
<li id="item7">Item 3.2</li>
<li id="item8">Item 3.3
<ul>
<li id="item9">Item 3.3.1</li>
<li id="item10">Item 3.3.2</li>
<li id="item11">Item 3.3.3</li>
</ul>
</li>
</ul>
</li>
<li id="item4">Item 4</li>
<li id="item5">Item 5
<ul>
<li id="item12">Item 5.1</li>
<li id="item13">Item 5.2</li>
<li id="item14">Item 5.3</li>
</ul>
</li>
<li id="item16">Item 6</li>
<li id="item17">Item 7</li>
<li id="item18">Item 8</li>
<li id="item19">Item 9</li>
<li id="item20">Item 10</li>
<li id="item21">Item 11</li>
</ul>
</body>
</html>