Rendre DIV accepter et gérer drop via JavaScript possible?

Question

J'ai été googling et essaye ceci pendant un bon moment maintenant, mais vient nulle part. Alors voilà:

Ce que je veux faire est de déposer du texte sur une balise DIV et gérer cela avec JavaScript. Quelque chose le long de ces lignes:

<script type="text/javascript"> 

function handleDrop(sender, args) 
{ 
    $('#theDiv').html(args.textfromdrop); 
} 

</script> 

<div id="theDiv" ondrop="handleDrop()" /> 

<br/> 
<p> 
This is some simple text. Draggable? 
</p> 

Donc, sur cette page je veux être en mesure de faire glisser le contenu du paragraphe par exemple à la div et il traiterait la goutte et changer son apparence en conséquence (Ou peut-être afficher juste que texte, tant qu'il le manipule!). J'ai essayé avec jQuery, mais il semble que ce soit un tout autre modèle, et je ne peux pas définir tous mes draggables potentiels en tant que tels, car ils devraient pouvoir venir de partout. Est-ce seulement possible?

EDIT: S'il vous plaît corrigez-moi si je me trompe, mais ces droppables nécessitent tous un glisser-déposer, non? Ce que je voudrais, c'est que vous puissiez déposer du texte, du texte pur, à partir d'une page dont vous n'avez aucun contrôle. Cela peut sembler bizarre, mais c'est pour une extension firefox où vous pouvez faire glisser le contenu d'une page à une autre page qui se trouve dans la barre latérale.

Answer 1

Si vous êtes vraiment essayer de le faire avec jQuery cela devrait aider: SO jquery-droppables-change-element-on-drop

Answer 2

Je vous recommande d'utiliser une bibliothèque Javascript établie, comme jQuery ou YUI.

Answer 3

Ou si vous préférez Prototype comme je le fais: http://wiki.github.com/madrobby/scriptaculous/droppables

EDIT: En fonction de votre question révisée: Non, il n'y a aucun moyen de permettre à un utilisateur d'abandonner le texte d'une page à une autre page. Pas à moins que vous décidiez de construire une extension FireFox comme vous le disiez. Même si vous pouvez contourner le problème de sécurité où vous ne pouvez pas scripter une page qui ne se trouve pas sous le même domaine, vous pouvez uniquement faire glisser et déposer des éléments DOM dans la fenêtre/iFrame.

Answer 4

Avez-vous envisagé de créer une zone de texte masquée (c.-à-d. avec le style css visibility:hidden) chevauchant la div en question? Ensuite, vérifiez les sauts avec l'événement JavaScript onchange, ou si cela ne fonctionne pas, périodiquement la valeur de textarea pour les chaînes non vides. Je suppose que votre kilométrage variera en fonction du navigateur et du système d'exploitation.

Answer 5

Je l'ai déjà fait et cela PEUT se faire sans aucune bibliothèque avec quelques efforts.

J'ai construit les méthodes suivantes:

1. méthode qui permet de suivre vos mouvements de la souris.
2. Méthode permettant de lire et de transmettre le contenu lorsque vous le faites tomber.
3. Utilisé les événements onmousemove et onclick pour les méthodes de glisser-déposer.
4. OnMouseOver pour la zone div où vous souhaitez supprimer le texte - pour détecter si le pointeur se trouve sur le conteneur (div) ou non.
5. Enfin, après avoir supprimé le texte, j'ai supprimé le contenu d'origine (si nécessaire) en utilisant innerHTML afin qu'il semble avoir été déplacé.

Vous pouvez à peu près réaliser une fonctionnalité de type glisser-déposer de Windows avec ceci. Je l'ai utilisé pour faire glisser et déposer des images, des icônes, etc.

Si vous avez besoin d'aide avec le codage, je peux vous donner quelques conseils, mais la plupart de vous trouveront si vous Google autour d'un peu, alors tout ce que vous devez faire est de les faire travailler ensemble.