Создать область сброса, которая может принимать произвольный текст / изображения - PullRequest
Новая
       13

Создать область сброса, которая может принимать произвольный текст / изображения

0 голосов
/ 11 июля 2009

Я пытаюсь создать область сброса, которая может принимать произвольный текст, изображения или текст и изображения.

Я знаю, как создать сбрасываемый объект в jQuery, но он принимает только те элементы, которые явно объявлены как перетаскиваемые. Все, что я хочу сделать, это выделить произвольный текст, изображения или текст и изображения с помощью моей мыши в браузере и перетащить его (представьте, выделив этот оператор в скобках и перетащив его - нет необходимости в реальном перетаскивании) в область отбрасывания.

Как я могу создать область сброса, которая принимает случайные вещи и может дать мне информацию о том, что в них сбрасывается?

Любая помощь очень ценится.

С уважением, David

Ответы [ 2 ]

0 голосов
/ 11 июля 2009

Может быть возможно обнаружить события мыши и динамически сделать контент перетаскиваемым ...

Вы можете получить выделенный текст, используя:

txt = document.getSelection ();

Похоже, это работает только с текстом, но не с HTML.

Полный код выбора здесь: http://www.codetoad.com/javascript_get_selected_text.asp

0 голосов
/ 11 июля 2009

Я думаю, что это может помочь вам!

Предоставляя один и тот же «класс» всем перетаскиваемым элементам, вы можете достичь своей цели.

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 может дать вам лучшее руководство.

...