Drag & Drop -> TExtarea

Benjamin Derepas
Javascript

Bonjour à tous !
Je bloque depuis plusieurs jours sur un système de drag and drop:
J'ai un page qui récupère et affiche mes articles depuis une bdd.
A coté de sa, j'ai un textarea vide.

J'aimerais mettre en place un drag&drop des mes articles vers le textarea
(Par exemple : je veut modifier l'article 23, je le déplace dans le textarea, il remplis ce dernier et je peut modifier ainsi à ma convenance).

Je doit avouer que je ne maitrise pas du tout cette technologie, j'ai donc cherché et trouvé un exemple sur internet.. mais il ne fonctionne pas !
Voyez vous, avec vos yeux experts, un problème dans le code suivant :

LA LISTE DES ARTICLES :
[code]
<div class="tab-content">
<?php $articles = $DB->query('SELECT id,contenu FROM articles ORDER BY id DESC'); ?>
<?php foreach ( $articles as $a ): ?>
<div draggable="true" class="tab-pane" id="<?= $a->id;?>">
<p class="moove">
<?= nl2br($a->contenu);?>
</p>
</div>
<?php endforeach;?>
</div> <!-- end tab-content -->
/code]

LE TEXTAREA :
[code]
<textarea id="main_text" name="contenu" draggable="true"></textarea>
[/code]

LE JS :
[code]
function insertAtCaret(area, text) {
var scrollPos = area.scrollTop;
var strPos = 0;
var br = ((area.selectionStart || area.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) );
if (br == "ie") {
area.focus();
var range = document.selection.createRange();alert(area);
range.moveStart ('character', -(area.value.length));
strPos = range.text.length;
} else if (br == "ff")
strPos = area.selectionStart;
var front = (area.value).substring(0, strPos);
var back = (area.value).substring(strPos, area.value.length);
area.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") {
area.focus();
var range = document.selection.createRange();
range.moveStart ('character', -(area.value.length));
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);
range.select();
} else if (br == "ff") {
area.selectionStart = strPos;
area.selectionEnd = strPos;
area.focus();
}
area.scrollTop = scrollPos;
}

$(document).ready(function() {
var options = {
accept: "span.move",
drop: function(ev, ui) {
insertAtCaret($("textarea#main_text").get(0), ui.draggable.eq(0).text());
}
};

$("span.move").draggable({
    helper:'clone',
    start: function(event, ui) {
        var txta = $("textarea#main_text");
        $("div#pseudodroppable").css({
            position:"absolute",
            top:txta.position().top,
            left:txta.position().left,
            width:txta.width(),
            height:txta.height()
        }).droppable(options).show();
    },
    stop: function(event, ui) {
        $("div#pseudodroppable").droppable('destroy').hide();
    }
});

});
[/code]

J'ai beau chercher, impossible de récupérer dans le textarea, le contenu d'un article !

Sources : [url=http://jsbin.com/egefi/1/edit]ici[/url]

En espérant trouver une réponse ici, d'avance merci !

Aucune réponse