Create droppable area that can accept random text/images

Question

Hello,

I'm trying to create a droppable area that can accept random text, images, or text and images.

I know how to create a droppable in jQuery, but it only accepts items that are explicitly declared draggable. All I want to do is highlight random text, images, or text and images using my mouse in the browser and drag it (imagine highlighting this parenthesized statement and dragging it - no need for an actual draggable) over to the droppable area.

How can I create a droppable area that accepts random things and can give me information about what is being dropped into them?

Any help is greatly appreciated.

Regards, David

Answer 1

I think this May Help you!

By giving the same "Class" to all dragable elements you can achieve you goal.

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 is can give you better guidance.

Answer 2

Hey John,

Thanks for the response. The code looks good, except I won't have the luxury of adding the drop class to "random text" and the image. If I can't do that, can there still be a way to have a droppable that can accept it?

Regards, David

Answer 3

It might be possible to detect mouse events and dynamically make the content draggable ...

You can get the selected text using:

txt = document.getSelection();

It looks like this only works on text, not the actual HTML though.

Full selection code is here: http://www.codetoad.com/javascript_get_selected_text.asp