Question

我正在尝试创建一个可以接受随机文本，图像或文本和图像的可放置区域。

我知道如何在jQuery中创建一个droppable，但它只接受明确声明为draggable的项目。我想要做的就是在浏览器中使用我的鼠标突出显示随机文本，图像或文本和图像并拖动它（想象一下突出显示这个带括号的语句并拖动它 - 不需要实际可拖动）到可放置区域。

如何创建一个可接受随机内容的可放置区域，并可以向我提供有关放入其中的内容的信息？

非常感谢任何帮助。

此致大卫

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

创建可以接受随机文本/图像的可放置区域

2 个答案: