Drag & Drop - Переносим Картинку на Форму с помощью мыши (HTML + JS)

10.10.22

Разработка - Работа с интерфейсом

Реализуем метод Drag & Drop на форме c записью/чтением двоичных данных в/из реквизит формы (пример: доработка формы Номенклатуры; Почтовый клиент; Присоединенные файлы) средствами HTML + JavaScript (работает в Толстом/Тонком/Web клиенте)

Скачать файлы

Наименование Файл Версия Размер
Drag & Drop - Переносим Картинку на Форму с помошью мыши (HTML + JS):
.epf 8,72Kb
7
.epf 8,72Kb 7 Скачать

В продолжение темы "Картинка на форме с масштабированием при наведении курсора" предлагаю рассмотреть вариант взаимодействия с WebKit на платформе 1С используя "поле HTML документа" на примере метода Drag & Drop;

 

* Это не готовое решение, а пример взаимодействия с WebKit на платформе 1С средствами HTML + JavaScript;

 

В обработке реализовано:

  • Использование Drag & Drop (как для одного файла, так и пакетное добавление);
  • Запись Двоичных данных в реквизит формы из поля HTML документа;
  • Чтение двоичных данных из реквизита формы на поле HTML документа;

Возможное использование:

  • Доработка формы справочника "Номенклатура" для быстрого добавления/редактирования списка изображений;
  • Почтовый клиент;
  • Быстрое присоединение файлов на формах Справочников/Документов;
 
 Подробнее:

Создадим Форму:

  • Делим на две колонки;
  • Слева ТаблицаФайлов;
  • Справа ПолеHTML;
  • Разделим ПолеHTML на две колонки;
  • Внузу правой колонки добавим div id='DropData' и немного стилизуем его (собственно он и будет отвечать за Drag & Drop);
  • Остальное пространство правой колонки оставим под миниатюры загруженных файлов;
  • В левой колонке будем отображать увеличенное изображение из Активной строки ТаблицыФайлов;

Где:

  • div id='DropData' - Наше поле в которое будем "перетаскивать" файлы;
  • ТаблицаФайлов - Таблица формы в которой будем хранить полученные файлы;
  • drop(event) - собственно сам скрипт отвечающий за "перетаскивание";
  • ПолеHTML - Реквизит формы с Типом "Строка" и Видом "Поле HTML документа";
 
 Код

Далее в обработчике "ПолеHTMLПриНажатии" вызываем Скрипт:

ЭлементДанных = ДанныеСобытия.Document.getElementById("DropData");

И далее обрабатываем полученный ответ из ЭлементДанных;

 

Весь код открыт, на все вопросы готова ответить.

Не зависит от Конфигурации, работает на любой ОС.

Для платформы начиная с: 8.3.14.1565.

Конфигурация не имеет значения.

html javascript JS js drag and drop

См. также

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

Сайты и интернет-магазины WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме. Без существенных изменений типовой конфигурации. Проверено с брендами: Интеграция 1С и GEELY Интеграция 1С и HAVAL Интеграция 1С и KIA Интеграция 1С и FORD Интеграция 1С и LADA ГАРАНТИЯ 100% ВНЕДРЕНИЯ!

36000 руб.

03.08.2020    15728    10    17    

11

Интеграция 1С — Битрикс24. Обмен задачами

Сайты и интернет-магазины Интеграция WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 Управленческий учет Платные (руб)

Интеграция 1С и Битрикс24. Разработка имеет двухстороннюю синхронизацию 1С и Битрикс24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (8.3.18.1289). При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

5040 руб.

04.05.2021    17541    6    15    

13

Интеграция с сервисом vetmanager

WEB-интеграция Платформа 1С v8.3 Бухгалтерский учет 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Внешняя обработка разрабатывалась для загрузки документов из Ветменеджер в 1С: Бухгалтерия 3.0

12000 руб.

02.02.2021    16353    42    49    

23

[Расширение] БОР-Навигатор.Культура

Зарплата Бюджетный учет WEB-интеграция Обмен с ГосИС Платформа 1С v8.3 Сложные периодические расчеты 1С:Зарплата и кадры государственного учреждения 3 Государственные, бюджетные структуры Россия Бюджетный учет Платные (руб)

Расширение конфигурации, включающее в себя объекты, необходимые для подготовки и сдачи отчета "Штатная численность" системы "БОР-Навигатор.Культура" в программе "1С:Зарплата и кадры государственного учреждения", редакция 3.1.

8400 руб.

01.02.2019    25736    9    0    

7

Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС

Обмен с ГосИС WEB-интеграция Платформа 1С v8.3 Управляемые формы 1С:Комплексная автоматизация 1.х 1С:Бухгалтерия 2.0 1С:Управление торговлей 10 1С:Управление производственным предприятием 1С:Управление нашей фирмой 1.6 1С:Бухгалтерия государственного учреждения 1С:Документооборот 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Платные (руб)

Обработка является альтернативой механизму, разработанному фирмой 1С и заполняющему реквизиты контрагента по ИНН или наименованию. Не требуется действующей подписки ИТС. Вызывается как внешняя дополнительная обработка, т.е. используется, непосредственно, из карточки контрагента. Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС (egrul.nalog.ru) для БП 2.0, БП 3.0, БГУ 1.0, БГУ 2.0, УТ 10.3, УТ 11.x, КА 1.1, КА 2.x, УПП 1.x, ERP 2.x, УНФ 1.5, УНФ 1.6, УНФ 3.0, ДО 2.1

2400 руб.

28.04.2016    88571    160    215    

318
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. user1203706 12 11.10.22 09:53 Сейчас в теме
(1) побольше пишите на тему вэбкита: как сделать слайдер, как ловить события с поля, как вывести красивый грид, как использовать в мобильном приложении - там это более актуально в виду ущербности типовых контролов.
2. Asya.Ozerova 40 11.10.22 10:04 Сейчас в теме
(1)Спасибо за Ваш отзыв, для меня это важно!
Я учту Ваше мнение!
(1)
как сделать слайдер, как ловить события с поля, как вывести красивый грид, как использовать в мобильном приложении

Возьму как Темы для следующих публикаций!
3. maXon777 128 29.10.22 08:34 Сейчас в теме
Полезная штука - попробуем у себя в трекере реализовать. В "чистом" 1с очень не хватает интерфейсных инструментов.
4. Asya.Ozerova 40 29.10.22 15:31 Сейчас в теме
(3)Если есть проблемы, пишите, думаю вместе мы сможем их решить!
5. salexdv 2327 30.10.22 12:12 Сейчас в теме
А зачем такие сложности, когда штатными средствами можно реализовать перетаскивание в обычное поле картинки на форме?
6. Asya.Ozerova 40 30.10.22 21:25 Сейчас в теме
7. salexdv 2327 31.10.22 06:05 Сейчас в теме
(6) И пакетное тоже. Если перетаскивается несколько файлов, то в событии перетаскивания у поля картинки (таблицы значений и пр.) будет массив объектов с типом Файл, а дальше делаете с ними что хотите.
Оставьте свое сообщение