Я не понимаю Несколько частей перетаскивания

Это мой код:Я не понимаю Несколько частей перетаскивания

<html> 
    <head> 
     <style> 
      #div1 { 
       width:350px; 
       height:70px; 
       padding:10px; 
       border:1px solid #aaaaaa; 
      } 
     </style> 
     <script> 
      function allowDrop(ev) { 
       ev.preventDefault(); 
      } 

      function drag(ev) { 
       ev.dataTransfer.setData("text", ev.target.id); 
      } 

      function drop(ev) { 
       ev.preventDefault(); 
       var data = ev.dataTransfer.getData("text"); 
       ev.target.appendChild(document.getElementById(data)); 
      } 
     </script> 
    </head> 
    <body> 
     <p>Drag the W3Schools image into the rectangle:</p> 
     <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
     <br> 
     <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> 
    </body> 
</html>

Вопросов:

1) зачем использовать document.getElementById (данные)? данные являются переменными без id.

2) почему тип данных вначале Параметр setData - это текст? это изображение без текста.

3) Второй параметр setData - это элемент или идентификатор?

4) Почему для обоих событий (ondrogover и ondrop) используется event.preventDefault? Недостаточно ли для события?

источник

2016-05-22 Ehsan

Прежде всего. SO не является школой кодирования.

Но вопрос не такой, как noob как выглядит.
Чтобы спросить его вот так, у меня такое ощущение, что @ehsan, безусловно, прочитал всю страницу W3C, где взял образец кода. (http://www.w3schools.com/html/html5_draganddrop.asp)

Хорошо, поэтому чувак хочет более конкретных объяснений по этому перетаскиванию вещей ... до самой глубины всех методов и событий.
И это самое основное объяснение W3C не удовлетворяет аппетиту к знаниям.
Хороший студент!

Давайте попробуем ответить на него!
Первый, давайте посмотрим на события заказа:

1- Объект предназначен как перетаскиваемом объекта на Mouseclick трюме над ним. Это возможно только потому, что этот элемент определяется как: draggable="true"

Здесь мероприятие ondragstart. Он вызывает функцию drag(), которая «устанавливает данные» в объекте dataTransfer.

2- Пользователь может перетащить его везде, где в окне просмотра без какого-либо эффекта до тех пор, как он хочет ...
Пока он не тащит его на элемент, который имеет указанное событие ondragover определенно что-то делать.

В нашем случае это вызываемые функции allowDrop().
Это простая функция, которая говорит «предотвращать дефолт».
БОЛЬШЕ ЧИТАТЬ ЗДЕСЬ: http://www.w3schools.com/jsref/event_preventdefault.asp

В нашем случае, это удаляет по умолчанию блокирующий уронить что-то внутри него.
ПОЧЕМУ?: Потому что это значение по умолчанию для КАЖДОГО элемента веб-страницы. Итак, мы должны удалить этот блок, как только перетащить.

3- Пользователь, наконец, отпустил свою кнопку мыши над элементом, включенным в этот элемент.
Так происходит событие ondrop, которое вызывает функцию drop().

Эта функция фактически добавляет элемент «target» (элемент, зависающий в данный момент) с полным определением объекта HTML (как текст!), Который был первоначально перетаскивается пользователем.

Как Javascript знает, какой элемент был вытащен?
Он принимает его в dataTransfer объект, который был создан событием ondragstart.
Этот полный HTML-объект представляет собой ТЕКСТ здесь ... Результат функции drag().

-----
Ответы сейчас! ;)

Вопрос №1: переменная «данные» содержит идентификатор (это действительно базовое знание javaScript здесь).

Вопрос № 2: Тип данных - это «текст», поскольку данные прилагаются в текстовом формате (HTML-элемент, как вы могли бы написать его в текстовом редакторе). Это может быть изображение, ссылка, кнопка ... Как бы то ни было.

Вопрос № 3: Это идентификатор. Идентификатор элемента «target» В этом случае BE DRAGGED.
(Мы в функции drag(), и мы все еще над элементом тащиться)

Это не то же самое «цель», как и в функции drop() (когда пользователь находится над включенным элементом капли), потому что теперь это «цель» другого события.

Вопрос # 4: Вы, вероятно, уже поняли, что перед удалением вы должны включить dropping, поскольку по умолчанию он заблокирован. Как открыть дверь, прежде чем войти. Просто так.

-----
MORE ЧТЕНИЕ на объекте DataTransfer здесь: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

источник

2016-05-22 02:58:37

Я не понимаю Несколько частей перетаскивания

ответ

Смежные вопросы