Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
Noob32
13 / 1 / 0
Регистрация: 25.03.2013
Сообщений: 195
#1

Драг энд дроп - JavaScript

20.03.2017, 21:38. Просмотров 95. Ответов 0
Метки нет (Все метки)

На этом сайте: https://learn.javascript.ru/drag-and...l5-drag-n-drop прочитал про драг энд дроп.
Там был приведен данный код:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var ball = document.getElementById('ball');
 
ball.onmousedown = function(e) { // 1. отследить нажатие
 
  // подготовить к перемещению
  // 2. разместить на том же месте, но в абсолютных координатах
  ball.style.position = 'absolute';
  moveAt(e);
  // переместим в body, чтобы мяч был точно не внутри position:relative
  document.body.appendChild(ball);
 
  ball.style.zIndex = 1000; // показывать мяч над другими элементами
 
  // передвинуть мяч под координаты курсора
  // и сдвинуть на половину ширины/высоты для центрирования
  function moveAt(e) {
    ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
    ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
  }
 
  // 3, перемещать по экрану
  document.onmousemove = function(e) {
    moveAt(e);
  }
 
  // 4. отследить окончание переноса
  ball.onmouseup = function() {
    document.onmousemove = null;
    ball.onmouseup = null;
  }
}
Во-первых, я не понял это:
Javascript
1
ball.style.position = 'absolute';
Зачем его ставить? В относительном позиционировании тоже нормально двигается.

Во-вторых,
Javascript
1
document.body.appendChild(ball);
Я поместил мяч в 2 контейнера, которые в относительном позиционировании и все нормально.
HTML5
1
2
3
4
5
<div id="div1">
        <div id="div2">
            <img src="https://js.cx/clipart/ball.svg" id="ball">
        </div>
    </div>
В-третьих, почему onmousemove на document работает? Из-за всплытия чтоле?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.03.2017, 21:38
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Драг энд дроп (JavaScript):

Фронт- и бэк-энд разработка на пальцах - JavaScript
Объясните популярно, без философии и кода, что это такое.

про драг н дроп - C++ Builder
здраствуйте, на форме 3 компонента memo, edit, button ! нужно перетащить скажем mp3 файл с помощью драг н дроп в мемо, там в мемо должно...

Как перемещать кнопки драг энд дропом а также изменять их размеры - C# WPF
Здравствуйте. Подскажите пожалуйста, каким образом можно перемещать кнопки(button которые) на экране а также изменять их размеры кнопкой...

Есть ли в эксцеле чорткутчи для перемещения строк? Или драг анд дроп? - MS Excel
Очень часто приходится двигать строки вверх вниз. Задлобало выполнять последовательность действий. 1.Вы делить нужную строку. ...

Рандом энд цикл - C++/CLI
Столкнулся с интересной темой. Color ^col= gcnew Color(); Graphics ^im = this-&gt;CreateGraphics(); im-&gt;Clear(col-&gt;White); ...

Как сделать Драг-Рейсинг - Unity, Unity3D
Как Сделать Драг-Рейсинг, как в need-for-speed undeground 1

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.03.2017, 21:38
Привет! Вот еще темы с ответами:

Очень нужен совет бек-энд спецов - Программирование
Привет. Я делаю приложение похожее на https://chatvdvoem.ru/ и http://pogovorisomnoi.ru/. Подскажите как здесь выполнить серверную...

Содержание драг металлов в xerox workcentre pro 420? - Принтеры, МФУ
Хочу списать этот аппарат, который много лет отработал, но не могу найти инфу по драг металлам... Перерыл Service Manual для этого аппарата...

Как расширить плагин фронт-энд добавления материалов? - WordPress
Здравствуйте. Необходима ваша помощь по плагину WP User Frontend. Установил я его, он позволяет добавлять материалы пользователем не заходя...

Дроп подключения на 1-2сек - Windows 10
Неделю назад интернет начал пропадать на 1-2 секунды, это было видно по значку &quot;Сеть&quot; на панели. Сперва подумал что проблема в роутере или...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru