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

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

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

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

InstntCMS 2.2.1.

Глюки Drag&Drop - как исправить?
Прикрепленные файлы:
DnDproblem_v7h3j.png | 28.6 Кб | Скачали: 270
Посетитель
no avatar
МедальАвторитет форума
Сообщений: 2780
у меня аналогично
Реклама
cms
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1035
Val, если я правильно понял что требуется, то так:
- открываешь файл fileuploader.js в используемом шаблоне
- ищешь (примерно строка 575)
Код PHP:
  1.  
  2. qq.attach(document, 'dragenter', function(e){
  3. if (!dz._isValidFileDrag(e)) return;
  4.  
  5. dropArea.style.display = 'block';
  6. });
  7.  
- и меняешь document, на нужную тебе область, например:
Код PHP:
  1.  
  2. qq.attach(document.getElementById('widget_image_picture'), 'dragenter', function(e){
  3. if (!dz._isValidFileDrag(e)) return;
  4. console.log("DONE"); //проверяем, все ли работает
  5. dropArea.style.display = 'block';
  6. });
  7.  
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1164
Rossoman, спасибо))
Вечером за своим компом попробую.
Непонятно зачем fileuploader.js сразу ловит событие по всему документу, а не по определенному полю =(
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1035
Val:
Непонятно зачем fileuploader.js сразу ловит событие по всему документу, а не по определенному полю =(
аналогично в яндекс.диске например. Когда нужно загрузить файл дропом, то активно становиться все окно, и оно подсвечивается
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1164
=) В Яндекс.Диске такое поведение вполне оправдано - там вся система сделана для того чтобы загружать файлы на сервер! А здесь, я считаю, такой функционал излишним (как минимум должно настраиваться в библиотеке).
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1164
Свою проблему пока решил немного по другому, а именно добавлением нового события 'dragenter' на document при старте перемещения элементов и удалении этого события при окончании движения.

Код JS:
  1. $(document).on('dragenter', function(event) {
  2. $('.qq-upload-drop-area').hide(); // тупо не показываю область приема
  3. });
Что касается изменения "приёмника" со всего document'а на только конкретный элемент, то более универсально будет сделать так:
Код JS:
  1. qq.attach(self._element, 'dragenter', function(e){
  2. if (!dz._isValidFileDrag(e)) return;
  3.  
  4. dropArea.style.display = 'block';
  5. });
по примеру из других участков кода. (Понятно, что getElementById('widget_image_picture') не сработает если системное имя поля с картинкой будет не picture, а, например, photo).

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

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

P.S. Инициализировать событие dragenter можно выделив кусок текста и немного сдвинуть его мышкой. Такое случайно может произойти у пользователя, и он увидит вывалившейся зеленый прямоугольник, вместо кнопки "Выбрать и загрузить"
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1035
Val:
Пусть даже остается dragenter на document'е, но тогда появляющееся кислотно-зеленое поле drop'а (см. рисунок выше) должно явно указывать что оно хочет принять файл изображения.
Ну так это же можно решить просто версткой.
Val:
Понятно, что getElementById('widget_image_picture') не сработает если системное имя поля с картинкой будет не picture, а, например, photo)
я просто привел пример. Какую область указывать это только твое дело)
Val:
Остается нерешенным вопрос обработки qq.attach(document, 'dragleave', function(e){... Чтобы кнопка возвращалась назад при отводе курсора от drop-области. Ну пока не заморачивался с поиском решения.
mouseout не пойдет?
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1164
Rossoman:
Ну так это же можно решить просто версткой.
Это понятно))) Но не "можно", а "нужно" Причины я привел в посте выше.
В этой теме жду отклик сообщества что да как должно быть... Затем, по идее, надо подправить напильником и оформить pull request

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

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