Заставить DIV принять и обработать сброс с помощью JavaScript возможно?

Question

Я уже давно гуглю и пробую это, но ни к чему не приводит. Итак, вот так:

Что я хочу сделать, это добавить текст в тег DIV и обработать его с помощью JavaScript. Что-то вроде этого:

<script type="text/javascript">

function handleDrop(sender, args)
{
  $('#theDiv').html(args.textfromdrop);
}

</script>

<div id="theDiv" ondrop="handleDrop()" />

<br/>
<p>
This is some simple text. Draggable?
</p>

Итак, на этой странице я хочу иметь возможность перетаскивать содержимое из абзаца, например, в div, и оно будет обрабатывать перетаскивание и соответственно изменять его внешний вид (или, возможно, просто отображать этот текст, если он будет обрабатывать его) !). Я пробовал с jQuery, но, похоже, это совсем другая модель, и я не могу установить все свои потенциальные перетаскиваемые объекты как таковые, потому что они должны быть в состоянии прийти откуда угодно. Это вообще возможно?

РЕДАКТИРОВАТЬ: Пожалуйста, исправьте меня, если я ошибаюсь, но все эти сбрасываемые предметы требуют перетаскивания, верно? Я хотел бы, чтобы вы могли отбрасывать текст, чистый текст, со страницы, которую вы не можете контролировать. Это может показаться странным, но это расширение для Firefox, где вы можете перетаскивать контент со страницы на другую страницу, которая находится на боковой панели.

Answer 1

Я делал это раньше, и это МОЖЕТ быть сделано без какой-либо библиотеки.

Я построил следующие методы:

1. Метод, который отслеживает движения мыши.
2. Способ чтения и передачи содержимого при отбрасывании.
3. Используются события onmousemove и onclick для методов перетаскивания.
4. OnMouseOver для области div, в которую вы хотите перетащить текст - чтобы определить, находится ли указатель над контейнером (div) или нет.
5. Наконец, после удаления текста, я удалил исходный контент (при необходимости), используя innerHTML, чтобы он выглядел так, как будто он был перемещен.

Вы можете в значительной степени достичь функциональности Windows, такой как перетаскивание, с помощью этого. Я использовал его для перетаскивания изображений, значков и т. Д.

Если вам нужна помощь с кодировкой, я могу дать вам несколько советов, но большую часть вы найдете, если немного зайдете в Google, тогда все, что вам нужно сделать, это заставить их работать вместе.

Answer 2

Рассматривали ли вы создание скрытой текстовой области (то есть в стиле css visibility:hidden), перекрывающей рассматриваемый div? Затем проверяйте наличие отбрасываний с помощью события JavaScript onchange или, если это не работает, периодически присваивайте значение текстовой области для непустых строк. Я предполагаю, что ваш пробег будет варьироваться в зависимости от браузера и операционной системы.

Answer 3

Я бы рекомендовал использовать установленную библиотеку Javascript, такую ​​как jQuery или YUI.

Answer 4

Или, если вы предпочитаете Prototype, как я: http://wiki.github.com/madrobby/scriptaculous/droppables

РЕДАКТИРОВАТЬ: Исходя из вашего пересмотренного вопроса: Нет, нет способа разрешить пользователю перетаскивать текст с одной страницы на другую. Нет, если вы не решите создать расширение FireFox, как вы говорили. Даже если вы можете найти способ обойти проблему безопасности, когда вы не можете создать сценарий для страницы, находящейся не в одном домене, вы можете перетаскивать только элементы DOM в пределах окна / iFrame, в котором они находятся.

Answer 5

Если вы действительно пытаетесь сделать это с jQuery , тогда это должно помочь: SO jquery-droppables-change-element-on-drop