Sortable dans sortable

Bonjour à vous !

Je viens m'adresser à vous car j'ai un problème (on s'en serait douté !!). Dans le cadre d'un travail sur un projet, j'utilise mootools couplé à copix 3. Dans une de mes pages, je possède une liste de rubriques. Grâce à la fonction mootools Sortables, je parviens à effectuer des drags & drop entre mes rubriques. pour l'in stant pas de problèmes. Le truc c'est que dans ces rubriques, j'ai d'autres rubriques que j'aurai besoin également de réorganiser via un drag & drop. Et là ça coince !! .

Voici mon code :

Citation:

---

<script type="text/javascript">
<!--
{literal}
window.addEvent('domready',function() {
var sort = new Sortables($('conteneur_chapitres'), {
handles: $$(".handle_chapitres")
});

sort.addEvent('onComplete',function() {
var sortArray = new Array();

$('conteneur_chapitres').getChildren().each(function(element,i){
sortArray.push(element.id);
});

var url_MAJpos = "index.php?module=admin&group=admincellules&action=SaveNewOrderChap&arrayNewOrderChap="+sortArray;

new Ajax(url_MAJpos, { // MAJ via Ajax
method: 'get',
}).request();
});
});
{/literal}
//-->
</script>

<div id="conteneur_chapitres">
{foreach key=key from=$arChapitres item=objChapitre}
<div style="border:1px solid black; margin:0 0 20px 0; padding:20px 0; background-color:#FFFFAA" id="{$objChapitre->IDchapitre}" class="{$objChapitre->classTitreChap}">

<div class="handle_chapitres">handle</div>

<div style="border:1px solid black;">
<span onclick="adminCellule('chapitres','titreChapitre','{$objChapitre->IDchapitre}','{$objChapitre->contenu_id}');">{$objChapitre->titreChapitre}</span>

<script type="text/javascript">
<!--
{literal}
window.addEvent('domready',function() {

var sort_para = new Sortables($('conteneur_paragraphes_{/literal}{$objChapitre->IDchapitre}{literal}'), {
handles: $$(".handle_paragraphes")
});

});
{/literal}
//-->
</script>

<div id="conteneur_paragraphes_{$objChapitre->IDchapitre}">
{foreach from=$arParagraphes[$key] item=para}
<script type="text/javascript">
<!--
{literal}
// fonction qui gere le slider du paragraphe (idem celle pour le slider du texte d'intro)
window.addEvent('domready',function() {
// declaration de mon slider
var mySlide = new Slider($('zoneSlider-{/literal}{$para->IDparagraphe}{literal}'), $('slider-{/literal}{$para->IDparagraphe}{literal}'), {
steps: 100,
onChange: function(step){
$('valeurLargeurGauche-{/literal}{$para->IDparagraphe}{literal}').setHTML(step);
$('valeurLargeurDroite-{/literal}{$para->IDparagraphe}{literal}').setHTML('100'-step);
}
}).set({/literal}{$para->wCelG}{literal});

// MAJ visuel lors d'une modification de largeur de colonnes
$('slider-{/literal}{$para->IDparagraphe}{literal}').addEvent('mouseup', function(e) {
e = new Event(e).stop();

var largeurCellGauche = $('valeurLargeurGauche-{/literal}{$para->IDparagraphe}{literal}').innerHTML;
var largeurCellDroite = $('valeurLargeurDroite-{/literal}{$para->IDparagraphe}{literal}').innerHTML;

var url = "index.php?module=admin&group=admincellules&action=updatewidthcell&table={/literal}paragraphes{literal}&entreeBDD={/literal}{$para->IDparagraphe}{literal}&largeurCellGauche="+largeurCellGauche+"&largeurCellDroite="+largeurCellDroite;

new Ajax(url, {
method: 'get',
update: $('div_contain_text-{/literal}{$para->IDparagraphe}{literal}')
}).request();
});
});
{/literal}
//-->
</script>

<div class="handle_paragraphes">handle_para</div>

<div id='div_contain_text-{$para->IDparagraphe}' style="margin:20px 0 0 0;">
{if $para->celluleG!=""}
{eval var=$para->celluleG assign="celGauche"}
<div id="{$para->IDparagraphe}" height="{$para->hCelG}" class="{$para->classCelG}" onclick="adminCellule('paragraphes','cellParaG','{$para->IDparagraphe}','{$para->chapitre_id}');" style="border:1px solid black; float:left; width:{$para->wCelG-0.2}%;">{$celGauche}</div>
{/if}
{if $para->celluleD!=""}
{eval var=$para->celluleD assign="celDroite"}
<div id="{$para->IDparagraphe}D" height="{$para->hCelD}" class="{$para->classCelD}" onclick="adminCellule('paragraphes','cellParaD','{$para->IDparagraphe}','{$para->chapitre_id}');" style="border:1px solid black; float:left; width:{$para->wCelD-0.2}%;">{$celDroite}</div>
{/if}
<div style="clear:both;"></div>
</div>

<div id="zoneSlider-{$para->IDparagraphe}" style="background-color:red; height:20px; width:100%;">
<div id="slider-{$para->IDparagraphe}" style="height:20px; width:3px; background-color:blue;"></div>
</div>

<span id="valeurLargeurGauche-{$para->IDparagraphe}" style="color:green; font-weight:bold; display:none;"> XX </span>
<span id="valeurLargeurDroite-{$para->IDparagraphe}" style="color:green; font-weight:bold; display:none;"> XX </span>
{/foreach}
</div>
</div>
</div>
{/foreach}
</div>

---

Je pense avoir un problème de conflit de nom mais je n'en suis pas sur et je dois avouer que j'ai déjà cherché pas mal sur le net sans résultats.

j'espere que vous pourrez m'aider.

Merci d'avance

Personne n'aurait une idée ? même juste de quoi m'orienter ??

C'est toujours moi, je pense que personne n'a d'idée, ou peut-être pas envie de se pencher sur mon problème (ce n'est pas un reproche).

J'ai continuer à bosser sur mon probleme et voici l'erreur Javascript que j'ai :

el has no properties

:evilred: Si quelqu'un pouvait m'aider, me dire à quoi coorespond une telle erreur.

merci d'avance