jquery - Create droppable area that can accept random text/images

Question

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

有可能检测到鼠标事件并动态地使内容可拖动......

您可以使用以下方法获取所选文本：

txt = document.getSelection();

看起来这仅适用于文本，但不适用于实际的 HTML。

完整的选择代码在这里： http: //www.codetoad.com/javascript_get_selected_text.asp

Answer 2

我认为这可能会帮助你！

通过为所有可拖动元素提供相同的“类”，您可以实现目标。

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可以给你更好的指导。