Глюки Drag&Drop - как исправить?

#1 20 сентября 2015 в 23:06

Столкнулся с такой проблемой: если тип контента содержит поле image (Изображение), то при инициализации Drop-события изображение кнопки с надписью "Выбрать и загрузить" пропадает и появляется светло-зеленое поле, где частично видно надпись "Перетащите файлы сюда, чтобы загрузить".

Чтобы воспроизвести это достаточно сделать следующее: переходим в Создать -> Добавить пост (posts/add). Появляется страница ввода необходимых данных, где после ввода заголовка предлагается добавить Картинку для привлечения внимания с той самой кнопкой. Далее открываем любой файловый менеджер (Проводник, TotalCommander) и пробуем перетащить любой файл в любое место на странице. Файл можно не отпускать на странице, а вернуть обратно в менеджер. При этом мы увидим как кнопка сменится зеленым полем.

Вопрос заключается в следующем — как можно ограничить поле действия кнопки приема изображения? Чтобы она срабатывала на прием "drop-объектов" только в определенной области, но не на все странице?

InstntCMS 2.2.1.

Прикрепленный файл

DnDproblem_v7h3j.png 29 Кб

#2 21 сентября 2015 в 00:37

у меня аналогично

#3 21 сентября 2015 в 02:11

Val, если я правильно понял что требуется, то так:
— открываешь файл fileuploader.js в используемом шаблоне
— ищешь (примерно строка 575)

 
       qq.attach(document, 'dragenter', function(e){     
            if (!dz._isValidFileDrag(e)) return;
 
            dropArea.style.display = 'block';            
        });

— и меняешь document, на нужную тебе область, например:

 
       qq.attach(document.getElementById('widget_image_picture'), 'dragenter', function(e){     
            if (!dz._isValidFileDrag(e)) return;
                  console.log("DONE"); //проверяем, все ли работает
            dropArea.style.display = 'block';            
        });

Сегодня в 23:43

#4 21 сентября 2015 в 11:11

Rossoman, спасибо))
Вечером за своим компом попробую.
Непонятно зачем fileuploader.js сразу ловит событие по всему документу, а не по определенному полю =(

#5 21 сентября 2015 в 11:16

Непонятно зачем fileuploader.js сразу ловит событие по всему документу, а не по определенному полю =(
Val

аналогично в яндекс.диске например. Когда нужно загрузить файл дропом, то активно становиться все окно, и оно подсвечивается

#6 21 сентября 2015 в 11:19

=) В Яндекс.Диске такое поведение вполне оправдано — там вся система сделана для того чтобы загружать файлы на сервер! А здесь, я считаю, такой функционал излишним (как минимум должно настраиваться в библиотеке).

#7 21 сентября 2015 в 23:21

Свою проблему пока решил немного по другому, а именно добавлением нового события 'dragenter' на document при старте перемещения элементов и удалении этого события при окончании движения.

 $(document).on('dragenter', function(event) { 
                    $('.qq-upload-drop-area').hide(); // тупо не показываю область приема
                });

Что касается изменения "приёмника" со всего document'а на только конкретный элемент, то более универсально будет сделать так:

qq.attach(self._element, 'dragenter', function(e){     
            if (!dz._isValidFileDrag(e)) return; 
 
            dropArea.style.display = 'block';            
        });

по примеру из других участков кода. (Понятно, что getElementById('widget_image_picture') не сработает если системное имя поля с картинкой будет не picture, а, например, photo).

Остается нерешенным вопрос обработки qq.attach(document, 'dragleave', function(e){... Чтобы кнопка возвращалась назад при отводе курсора от drop-области. Ну пока не заморачивался с поиском решения.

А в целом текущее решение поля добавления изображения, IMHO, выглядит сыроватым. Оно конечно добавляет картинку куда надо, но… дьявол кроется в мелочах ©
Пусть даже остается dragenter на document'е, но тогда появляющееся кислотно-зеленое поле drop'а (см. рисунок выше) должно явно указывать что оно хочет принять файл изображения. В текущем виде смотрится больше как глюк какой-то)))

P.S. Инициализировать событие dragenter можно выделив кусок текста и немного сдвинуть его мышкой. Такое случайно может произойти у пользователя, и он увидит вывалившейся зеленый прямоугольник, вместо кнопки "Выбрать и загрузить"

#8 22 сентября 2015 в 10:18

Пусть даже остается dragenter на document'е, но тогда появляющееся кислотно-зеленое поле drop'а (см. рисунок выше) должно явно указывать что оно хочет принять файл изображения.
Val

Ну так это же можно решить просто версткой.

Понятно, что getElementById('widget_image_picture') не сработает если системное имя поля с картинкой будет не picture, а, например, photo)
Val

я просто привел пример. Какую область указывать это только твое дело)

Остается нерешенным вопрос обработки qq.attach(document, 'dragleave', function(e){… Чтобы кнопка возвращалась назад при отводе курсора от drop-области. Ну пока не заморачивался с поиском решения.
Val

mouseout не пойдет?

#9 22 сентября 2015 в 10:35

Ну так это же можно решить просто версткой.
Rossoman

Это понятно))) Но не "можно", а "нужно" Причины я привел в посте выше.
В этой теме жду отклик сообщества что да как должно быть… Затем, по идее, надо подправить напильником и оформить pull request

mouseout не пойдет?
Rossoman

Вариантов реализации думаю множество, нужно выбрать наиболее оптимальный.

Вообще с этим fileuploader'ом интересная история… Есть один форк — так называемый fileuploader 2 с рядом дополнений и исправлений, а есть официальный репозиторий в виде fineuploader — но это уже грузный монстр весом раза в 3-4 больше своего предшественника((
Можно еще порыть интернет, может есть какие более лучшие реализации или все же подрихтовать текущий исходник в соответствиями требованиями движка…

Шорткоды в Instant

Вывод групп в InstantMaps 2

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

Глюки Drag&Drop - как исправить?

Похожие темы

[ЕСТЬ РЕШЕНИЕ] drag'n'drop в сообщениях, редакторе

[ЕСТЬ РЕШЕНИЕ] Drag & Drop сортировка фото в альбоме

[ЕСТЬ РЕШЕНИЕ] Уровни вложенности меню

Режим отладки - как исправить ошибку

Очень глючат подписки, как исправить ?

[ЕСТЬ РЕШЕНИЕ] Логотип

InstantCMS Team

О проекте

Поддержка

Дополнения