After effects не работает drag and drop

Обновлено: 08.07.2024

Drag’n’Drop – отличный способ улучшить интерфейс. Захват элемента мышкой и его перенос визуально упростят что угодно: от копирования и перемещения документов (как в файловых менеджерах) до оформления заказа («положить в корзину»).

В современном стандарте HTML5 есть раздел о Drag and Drop – и там есть специальные события именно для Drag’n’Drop переноса, такие как dragstart , dragend и так далее.

Они интересны тем, что позволяют легко решать простые задачи. Например, можно перетащить файл в браузер, так что JS получит доступ к его содержимому.

Но у них есть и ограничения. Например, нельзя организовать перенос «только по горизонтали» или «только по вертикали». Также нельзя ограничить перенос внутри заданной зоны. Есть и другие интерфейсные задачи, которые такими встроенными событиями не реализуемы. Кроме того, мобильные устройства плохо их поддерживают.

Здесь мы будем рассматривать Drag’n’Drop при помощи событий мыши.

Алгоритм Drag’n’Drop

Базовый алгоритм Drag’n’Drop выглядит так:

При mousedown – готовим элемент к перемещению, если необходимо (например, создаём его копию).
Затем при mousemove передвигаем элемент на новые координаты путём смены left/top и position:absolute .
При mouseup – остановить перенос элемента и произвести все действия, связанные с окончанием Drag’n’Drop.

Это и есть основа Drag’n’Drop. Позже мы сможем расширить этот алгоритм, например, подсветив элементы при наведении на них мыши.

В следующем примере эти шаги реализованы для переноса мяча:

Если запустить этот код, то мы заметим нечто странное. При начале переноса мяч «раздваивается» и переносится не сам мяч, а его «клон».

Это можно увидеть в действии:

Попробуйте перенести мяч мышкой и вы увидите описанное поведение.

Всё потому, что браузер имеет свой собственный Drag’n’Drop, который автоматически запускается и вступает в конфликт с нашим. Это происходит именно для картинок и некоторых других элементов.

Его нужно отключить:

Теперь всё будет в порядке.

Ещё одна деталь – событие mousemove отслеживается на document , а не на ball . С первого взгляда кажется, что мышь всегда над мячом и обработчик mousemove можно повесить на сам мяч, а не на документ.

Но, как мы помним, событие mousemove возникает хоть и часто, но не для каждого пикселя. Поэтому из-за быстрого движения указатель может спрыгнуть с мяча и оказаться где-нибудь в середине документа (или даже за пределами окна).

Вот почему мы должны отслеживать mousemove на всём document , чтобы поймать его.

Правильное позиционирование

В примерах выше мяч позиционируется так, что его центр оказывается под указателем мыши:

Неплохо, но есть побочные эффекты. Мы, для начала переноса, можем нажать мышью на любом месте мяча. Если мячик «взят» за самый край – то в начале переноса он резко «прыгает», центрируясь под указателем мыши.

Было бы лучше, если бы изначальный сдвиг курсора относительно элемента сохранялся.

Где захватили, за ту «часть элемента» и переносим:

Обновим наш алгоритм:

Когда человек нажимает на мячик ( mousedown ) – запомним расстояние от курсора до левого верхнего угла шара в переменных shiftX/shiftY . Далее будем удерживать это расстояние при перетаскивании.

Чтобы получить этот сдвиг, мы можем вычесть координаты:

Далее при переносе мяча мы позиционируем его с тем же сдвигом относительно указателя мыши, вот так:

Итоговый код с правильным позиционированием:

В действии (внутри ифрейма):

Различие особенно заметно, если захватить мяч за правый нижний угол. В предыдущем примере мячик «прыгнет» серединой под курсор, в этом – будет плавно переноситься с текущей позиции.

Цели переноса (droppable)

В предыдущих примерах мяч можно было бросить просто где угодно в пределах окна. В реальности мы обычно берём один элемент и перетаскиваем в другой. Например, «файл» в «папку» или что-то ещё.

Абстрактно говоря, мы берём перетаскиваемый (draggable) элемент и помещаем его в другой элемент «цель переноса» (droppable).

Нам нужно знать:

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

Решение довольно интересное и немного хитрое, давайте рассмотрим его.

Какой может быть первая мысль? Возможно, установить обработчики событий mouseover/mouseup на элемент – потенциальную цель переноса?

Но это не работает.

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

Например, у нас есть два элемента <div> : красный поверх синего (полностью перекрывает). Не получится поймать событие на синем, потому что красный сверху:

То же самое с перетаскиваемым элементом. Мяч всегда находится поверх других элементов, поэтому события срабатывают на нём. Какие бы обработчики мы ни ставили на нижние элементы, они не будут выполнены.

Вот почему первоначальная идея поставить обработчики на потенциальные цели переноса нереализуема. Обработчики не сработают.

Так что же делать?

Существует метод document.elementFromPoint(clientX, clientY) . Он возвращает наиболее глубоко вложенный элемент по заданным координатам окна (или null , если указанные координаты находятся за пределами окна).

Мы можем использовать его, чтобы из любого обработчика событий мыши выяснить, над какой мы потенциальной целью переноса, вот так:

Заметим, нам нужно спрятать мяч перед вызовом функции (*) . В противном случае по этим координатам мы будем получать мяч, ведь это и есть элемент непосредственно под указателем: elemBelow=ball . Так что мы прячем его и тут же показываем обратно.

Мы можем использовать этот код для проверки того, над каким элементом мы «летим», в любое время. И обработать окончание переноса, когда оно случится.

Расширенный код onMouseMove с поиском потенциальных целей переноса:

В приведённом ниже примере, когда мяч перетаскивается через футбольные ворота, ворота подсвечиваются.

Придя впервые к технологии DRAG and DROP столкнулся с очень тяжелым её описанием (Это мое субъективное мнение. Прошу с ним не соглашаться, а перечитать все что только можно и посмотреть на этот вопрос с многих сторон). И решил написать пару статей, нацеленных на начинающих разработчиков, кто хочет познать дзен.

Статья будет состоять из двух частей:

Метод создания DRAG and DROP эффектов.
Практическое применение полученных знаний для создание сортировки при помощи DRAG and DROP

Параграф №1 Метод создания DRAG and DROP эффекта

Перед началом глубокого разбора, посмотрим поверхностно. Представьте себя в роли грузчика, вам необходимо перемесить коробку с одного места на другое. Для грузчика это «Ну взял, ну перенес. Готово!», а для программиста “Подошел к коробке, наклонился, взял коробку, поднял коробку, прошел N шагов, наклонился, отпустил коробку.”. Я это к тому, что перед началом работы проиграйте все в голове, по шагам и вы станете гораздо ближе к истине.

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

При создании DRAG and DROP первым шагом необходимо объекту, который мы будем перемещать, присвоить значение draggable='true'.

,
На первом этапе я хочу показать сам процесс, а после мы его распространим на все объекты. Мы сейчас работаем в JS и как вам известно, в браузере существуют различные события, к которым мы можем привязать свои последовательности действий. Давайте разберем необходимые события для создания DRAG and DROP:

dragstart — происходит, когда пользователь начинает перетаскивать элемент.
drag — происходит, когда элемент перетаскивается.
dragend — происходит, когда пользователь закончил перетаскивание элемента.
dragenter — происходит, когда перетаскиваемый элемент попадает в целевой объект.
dragleave — происходит, когда перетаскиваемый элемент покидает целевой объект.
dragover — происходит, когда перетаскиваемый элемент находится над целью.
drop — происходит, когда перетаскиваемый элемент падает на целевой объект.

Теперь очень важная информация! События делятся на две группы. Для перемещаемого элемента (тот кого мы перетаскиваем): dragstart, Drag, Dragend. Для принимающего элемента (куда перетаскиваем): Dragenter, Dragleave, Dragover, Drop. И эти события не могут работать наоборот, но они могут работать друг без друга.

К примеру: Необходимо переместить объект и оставить его там, где мы отпустили кнопку мыши. Эта задача не требует принимающей части.

Бесспорно, пример сделан на коленке, но он замечательно иллюстрирует не обязательность принимающего объекта.

Параграф №2. Не работает DROP в DRAG and DROP

Когда вы попробуете все события, вы обнаружите что drop не работает. Это разработчики данного метода делают атата тем, кто решил «И это всё… Хух, ерунда».

Ну тут все просто, перед событием drop необходимо на этот же элемент повесить событие

Как и в предыдущих версиях системы функция Drag and Drop после внесения некоторых изменений может не работать в Windows 10. Она позволяет перетаскивать файлы с одного окна в другое или с одной папки в другую. Так можно не только выполнять перемещение, но и открыть его с помощью сторонней программы. Некоторые обновления как ОС, так и ПО, и различные твикеры могут поломать эту функциональность.

Эта статья расскажет, что делать, когда не работает Drag and Drop Windows 10. Все пользователи пользуются перетаскиванием файлом, и не знаю, что в этой функции есть название. Значительно проще перетянуть нужный файл в определённое расположение, чем искать соответствующие пункты в меню.

Не работает перетаскивание (Drag and Drop) Windows 10

Функция Drag and Drop перестаёт работать в приложениях, запущенных с разными правами с включённым UAC. Бывает действительно достаточно отключить контроль учётных записей. Хотя снижение его уровня также может решить проблему.

Например, перетаскивание не работает из приложения запущенного с обычными правами в приложение запущенное с правами администратора. Если же нужно перетащить файл hosts из файлового менеджера Total Commander в классический Блокнот, тогда оба приложения запускайте от имени администратора.

Запустите программы от имени администратора Windows 10. Это действительно очень важно. Скорее всего, проблема будет уже решена. Но всё же есть дополнительные рекомендации, когда даже права администратора не помогают.

Перезапустите классический проводник

Как ни странно, но в некоторых ситуациях позволяет решить проблему перезапуск проводника в Windows 10. В чистой системе не возникает проблем с проводником и системой в целом. Если же установлено множество стороннего софта, ситуация может быть совсем иной.

Отключите контроль учётных записей

Контроль учётных записей (UAC) предотвращает изменения, вносимые в систему опасным ПО. По умолчанию в настройках установлено уведомлять только при попытках приложений внести изменения в компьютер. При попытке запустить вредоносное приложение, оно будет заблокировано в целях защиты Windows 10.

Обновите операционную систему

Обычно обновление ОС исправляет битые (проблемные) файлы путём их замены. В большинстве случаев рекомендуется обновить систему до последней версии. Даже если была ошибка через неудачное обновление, в следующем она исправляется. Как было с песочницей (Windows Sandbox), которая не запускалась на определённых конфигурациях компьютера.

После чистой установки операционной системы все функции работают как положено. Это касается только оригинального образа последней версии Windows 10. Рекомендуем проверить целостность системных файлов и выполнить чистую загрузку Windows 10. И теперь можете проверять функциональность Drag & Drop.

Функция Drag and Drop работает в большинстве приложений по умолчанию. А в программе VirtualBox её можно при желании включить отдельно в настройках. Она поддерживает перетаскивание файлов с виртуальной машины на компьютер.

В данной статье рассмотрим программную ошибку, при которой в Фотошопе не перетаскиваются файлы в рабочую зону программы.
Как выглядит ошибка продемонстрировано на скриншоте выше.

Решение проблемы методом запуска приложения Photoshop от имени Администратора сразу исключаем, не сработало ни разу ни на одном ПК.

Рассмотрим вариант решения проблемы внесением изменений в реестр.
Если ранее вы никогда не сталкивались с работой с реестром настало самое время. Бояться тут нечего, никакие системные файлы Windows мы случайно удалять не будем.
Действуем по инструкции и все получится.
Поехали!

1. Открываем командную строку, для этого зажимаем кнопки Win + R
2. В поле забиваем фразу "regedit", разумеется без кавычек, как на скриншоте:

3. Следуем по пути: HKEY_LOCAL_MACHINE > SOFTWARE > Microsoft > Windows > CurrentVersion > Policies > System и двойным кликом открываем файл EnableLUA

4. Меняем значение с 1 на 0

5. Сохраняем изменения и перезагружаем компьютер.

Все должно заработать!
Проверено на Windows 7 и Windows 10.

Оставляйте свои вопросы и комментарии под записью помогла вам инструкция или нет!
Буду рад любому комментарию!

Читайте также: