ランダムなテキスト/画像を受け入れることができるドロップ可能な領域を作成します。

Question

ランダムなテキスト、イメージ、またはテキストと画像を受け入れることができるドロップ可能領域を作成しようとしています。

私はjQueryでドロップ可能オブジェクトを作成する方法を知っていますが、明示的にドラッグ可能と宣言されているアイテムのみを受け入れます。私がしたいのは、ブラウザでマウスを使ってランダムなテキスト、画像、テキストや画像を強調表示してドラッグすることです（このカッコで囲まれた文を強調表示してドラッグすることができます）。

ランダムなものを受け入れ、その中に何が落とされているのかに関する情報を私に与えることができる、払拭可能な領域を作成するにはどうすればよいですか？

ご協力いただきまして誠にありがとうございます。

よろしく、 デビッド

Answer 1

私は、これはあなたを助けるかもしれないと思います！

すべてのドラッグ可能な要素に同じ「クラス」を与えることで、目標を達成できます。

の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では、あなたのより良い指導を与えることができます。

Answer 2

マウスイベントを検出し、動的コンテンツをドラッグ可能にすることが可能であるかもしれない...

あなたが使用して選択したテキストを取得できます。

TXT = document.getSelectionを（）;

実際のHTMLではなく、テキストでのみ動作するようです。

フル選択コードはこちらhttp://www.codetoad.com/javascript_get_selected_text.asp