Créer une zone de dépôt pouvant accepter du texte/des images aléatoires

Question

J'essaie de créer une zone de dépôt pouvant accepter du texte, des images ou du texte et des images aléatoires.

Je sais comment créer une droppable dans jQuery, mais n'accepte que les éléments explicitement déclarés comme draggables. Tout ce que je veux faire est de mettre en évidence du texte, des images ou du texte et des images aléatoires avec ma souris dans le navigateur et de le faire glisser (imaginez mettre en surbrillance cette déclaration entre parenthèses et faites-la glisser).

Comment créer une zone de dépôt qui accepte des éléments aléatoires et peut-elle me donner des informations sur ce qui y est déposé?

Toute aide est grandement appréciée.

Cordialement, David

Answer 1

Je pense que cela peut vous aider!

En donnant la même "Classe" à tous les éléments pouvant être traînés, vous pouvez atteindre votre objectif.

Js:

$(function() { 

    var $gallery = $('#something'), $trash = $('#divAccept'); 

    $('.drop',$gallery).draggable({ 
     revert: 'invalid', 
     containment: $('#divAccept').length ? '#divAccept' : 'document', 
     helper: 'clone', 
     cursor: 'move', 
    }); 

    $trash.droppable({ 
     accept: '#something > .drop', 
     drop: function(ev, ui) { 
      deleteImage(ui.draggable); 
     } 
    }); 

    // image deletion function 
    function deleteImage($item) { 
      $item.fadeOut(function() { 
       $item.appendTo($trash).fadeIn(); 
      }); 
    } 
}); 

Html:

<div id="something"> 
     <div class="drop">random text</div> 
     <div class="drop"><img src="../images.jpeg" /></div> 
    </div> 
    <div id="divAccept"></div> 

JQuery UI est peut vous donner une meilleure orientation.

Answer 2

Il pourrait être possible de détecter des événements de souris et de faire dynamiquement le contenu draggable ...

Vous pouvez obtenir le texte sélectionné à l'aide:

txt = document.getSelection();

Il semble que cela ne fonctionne que sur du texte, pas sur le code HTML actuel.

Le code plein choix est ici: http://www.codetoad.com/javascript_get_selected_text.asp