Erstelle einen Drop-fähigen Bereich, der zufällige Texte/Bilder annehmen kann

Question

Ich versuche einen absetzbaren Bereich zu erstellen, der zufälligen Text, Bilder oder Text und Bilder akzeptieren kann.

Ich weiß, wie ein Droppable in jQuery erstellt wird, aber es akzeptiert nur Elemente, die explizit als ziehbar deklariert werden. Alles, was ich tun möchte, ist, zufällige Texte, Bilder oder Texte und Bilder mit meiner Maus im Browser hervorzuheben und zu ziehen (stellen Sie sich vor, diese hervorgehobene Anweisung hervorzuheben und sie zu ziehen - keine Notwendigkeit für eine tatsächliche ziehbare) in den Drop-Bereich.

Wie kann ich einen absetzbaren Bereich erstellen, der zufällige Dinge akzeptiert und mir Informationen darüber geben kann, was in ihn hineinfällt?

Jede Hilfe wird sehr geschätzt.

Grüße, David

Answer 1

Ich denke, das Ihnen helfen können!

Indem Sie allen dragbaren Elementen dieselbe "Klasse" zuweisen, können Sie Ihr Ziel erreichen.

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 ist, können Sie eine bessere Führung geben.

Answer 2

Es könnte möglich sein, Mausereignisse zu erkennen und dynamisch den Inhalt ziehbar machen ...

Sie können den markierten Text, erhalten mit:

txt = document.getSelection();

Es sieht so aus, dass dies nur für Text funktioniert, nicht für den eigentlichen HTML-Code.

Der vollständige Auswahlcode ist hier: http://www.codetoad.com/javascript_get_selected_text.asp