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

10.10.22

–

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

Скачать исходный код

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

В продолжение темы "Картинка на форме с масштабированием при наведении курсора" предлагаю рассмотреть вариант взаимодействия с 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 = "<html>
	|<head></head>
	|<body>
	|<script>
	|var arrayFiles = [] /* Массив изображений */
	|var maxSizeFile = 5242880 /* Максимальный размер изображения */
	|function drop(ev) {
	|  ev.preventDefault();
	|  if (ev.dataTransfer.files.length > 0)
	|     {var numFiles = ev.dataTransfer.files.length - 1
	|	   var files = ev.dataTransfer.files;
	|	   
	|	   for(var i = 0; i < files.length; i++){
	|	   var file = files[i];
	|	   if (file.size > maxSizeFile)
	|	      {elem = {
	|            'name'       : file.name,
	|            'data'       : ""#0"",
	|            'size'       : file.size,
	|            'type'       : file.type}
	|		  arrayFiles.push(elem);
	|		  if (i == numFiles)
	|	         {document.getElementById(""DropData"").innerHTML = JSON.stringify(arrayFiles);
	|			 arrayFiles = [];
	|	         document.getElementById(""DropData"").click();}}
	|	   else
	|	   filesData(file, i == numFiles)}}
	|}
	|function filesData(file, endFile) {
	|	var reader = new FileReader();
	|	reader.onload = function(f, endFile) {
	|	return function(e) {
	|      		elem = {
	|          'name'       : f.name,
	|          'data'       : e.target.result,
	|          'size'       : f.size,
	|          'type'       : f.type}
	|		arrayFiles.push(elem);
	|	if (endFile == true)
	|	{document.getElementById(""DropData"").innerHTML = JSON.stringify(arrayFiles);
	|   arrayFiles = [];
	|	document.getElementById(""DropData"").click();}
	|};
	|}(file, endFile);
	|	reader.readAsDataURL(file);
	|}												
	|</script>
	|  <style> /* Стилизуем */
	|	.img {
	|		height: auto;
	|		width: auto;
	|		max-width: 160px;  /* Максимальная ширина */
	|		max-height: 160px; /* Максимальная высота */
	|   }
	|	.bigimg {
	|		height: auto;
	|		width: auto;
	|		object-fit: contain;
	|		max-width: 480px;  /* Максимальная ширина */
	|		max-height: 480px; /* Максимальная высота */
	|   }
	|   .scale {
	|       display: inline-block; /* Строчно-блочный элемент */
	//|    	overflow: hidden; /* Скрываем всё за контуром */
	|   }
	|   .scale img {
	|       transition: 0.1s; /* Время эффекта */
	|       display: block; /* Убираем небольшой отступ снизу */
	|   }
	|   .scale img:hover {
	|       transform: scale(1.5); /* Увеличиваем масштаб */
	|   }
	|   TD#leftcol {
	|       width: 80%; /* Ширина левой колонки в пикселах */
	|		height: auto;
	|   }                                           
	|	.content { 
	|	    height:  90vh; 
	|	    overflow:auto; 
	//|	    width:250px; 
	|	    background:#fff; 
	|	    position:absolute; 
	|	    bottom:100px; 
	|	}
	|	.box {
	|		width: 19.7%; /* ширина блока*/
	|		height: 96px; /* высота блока*/
	|	    overflow:auto; 
	|		border: 1px dotted black; /* рамка блока*/
	|		background-color: #ccc; /* фон блока*/
	//|		padding: 2px; /* отступы внутри блока*/
	|	    position:absolute; 
	|	    bottom: 0; /* отступы снизу*/
	|	}
	|  </style>
	|<table width=""100%"" cellspacing=""0"" id=""maket"">
	|<tr>
	|<td id=""leftcol""><img class='bigimg' src='data:image/;base64," + Base64Строка(УвеличенноеИзображение) + "'/></td>
	|<td valign=""top"">
	|<div class=""content"">";	
	Для Каждого СтрокаТаблицы Из ТаблицаФайлов Цикл                                                            
		ПолеHTM = ПолеHTM + " 
	|<div class='scale'> <img class='img' src='data:image/;base64," + Base64Строка(СтрокаТаблицы.ДвоичныеДанныеФайла) + "'/><br></div>";
	КонецЦикла;
	ПолеHTM = ПолеHTM + " 
	|</div>
	|<div id='DropData' class='box' class='stylecomment' contenteditable='true' display: inline-block>
	|</div>
	|</td>
	|</tr>
	|</table>
	|</body>
	|</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 разных брендов в одной информационной базе в ручном и автоматическом режиме.

36000 руб.

03.08.2020 16079 13 18

Управление доставками Boxberry, СДЭК, ЭкстраПочта, Почта России, Энергия, DPD, ПЭК, Grastin, Деловые Линии, КСЕ, Dalli

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

Программный продукт "Управление доставками в 1С" позволяет обмениваться с личным кабинетом СДЭК, Деловые Линии, ПЭК, DPD, Почта России и другими транспортных компаниями. Упрощает создание заявок и резервирование заказов прямо в интерфейсе 1С

18000 руб.

10.03.2016 57062 291 97

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

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

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

5040 руб.

04.05.2021 18158 10 15

SALE! 15%

Все службы доставки в Вашей 1С! Без изменения конфигурации! УТ, ERP, КА, УНФ

WEB-интеграция Рабочее место Оптовая торговля Розничная торговля Логистика, склад и ТМЦ Платформа 1С v8.3 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 Россия Управленческий учет Платные (руб)

40+ служб доставки для 1С в одном модуле! Внешняя обработка, которая НЕ изменяет Вашу конфигурацию! Подписная модель на 1 год.

~~19200~~ 16320 руб.

22.03.2017 36794 16 47

Интеграция с OpenCart 2.x, 3x

WEB-интеграция Оптовая торговля Розничная торговля Управляемые формы 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 Розничная и сетевая торговля (FMCG) Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Внешняя обработка, позволяет обмениваться данными между OpenCart (самая популярная бесплатная cms для интернет-магазинов) и 1С:Предприятие 8.

6800 руб.

17.11.2015 116452 347 137

216

Автоматическая загрузка файлов (например, прайс-листов) из электронной почты, FTP, HTTP, их обработка и выгрузка на FTP (на сайт) и для других целей

Прайсы WEB-интеграция Ценообразование, анализ цен Файловый обмен (TXT, XML, DBF), FTP Автомобили, автосервисы Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Программа с заданным интервалом времени (или по ручной команде) скачивает файлы (например, прайс-листы поставщиков) из различных источников: письма электронной почты, FTP или HTTP-адреса, и сохраняет их в каталог упорядоченной структуры. При этом извлекает файлы из архивов, может переименовывать файлы и менять их формат (csv, xls, txt). Можно настроить выгрузку обработанных файлов на сайт (через FTP-подключение). Программа будет полезна компаниям, у которых есть большое количество поставщиков и/или прайс-листы поставщиков обновляются часто (необязательно прайс-листы, файлы могут быть любого назначения). Собранные таким образом актуальные версии прайс-листов можно выгрузить с помощью программы себе на сайт (или на любой FTP-сервер) или выполнить другие необходимые задачи.

25200 руб.

28.05.2015 85381 26 51

Модуль для обмена "1С:Предприятие 8. УАТ. ПРОФ" с FortMonitor

WEB-интеграция 8.3.8 Конфигурации 1cv8 Автомобили, автосервисы Беларусь Украина Россия Казахстан Управленческий учет Платные (руб)

Расширение предназначено для конфигурации "1С:Предприятие 8. Управление Автотранспортом. ПРОФ". Функционал модуля: 1. Заполнение регистров сведений по подсистеме "Мониторинг", а именно: события по мониторингу, координаты по мониторингу, пробег и расход по мониторингу, текущее местоположение ТС по мониторингу 2. Заполнение путевого листа: пробег по мониторингу, время выезда/заезда, табличная часть ГСМ, места стоянок по геозонам. 3. Отчеты по данным загруженным в регистры сведений. 4. Предусмотрена автоматическая загрузка данных в фоновом режиме (условия работы данной загрузке читайте в описании товара) Модуль работает без включенной константы по настройкам мониторинга. Модуль формы предоставляется с открытым кодом, общий модуль защищен. Любой заинтересованный пользователь, имеет возможность скачать демо-версию расширения.

22656 руб.

25.05.2021 12989 33 8

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

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

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

12000 руб.

02.02.2021 16608 43 49

Комментарии

Подписаться на ответы Инфостарт бот

Свернуть все

1. user1203706 13 11.10.22 09:53 Сейчас в теме

(1) побольше пишите на тему вэбкита: как сделать слайдер, как ловить события с поля, как вывести красивый грид, как использовать в мобильном приложении - там это более актуально в виду ущербности типовых контролов.

2. Asya.Ozerova 41 11.10.22 10:04 Сейчас в теме

(1)Спасибо за Ваш отзыв, для меня это важно!
Я учту Ваше мнение!
(1)

как сделать слайдер, как ловить события с поля, как вывести красивый грид, как использовать в мобильном приложении

Возьму как Темы для следующих публикаций!

3. maXon777 129 29.10.22 08:34 Сейчас в теме

Полезная штука - попробуем у себя в трекере реализовать. В "чистом" 1с очень не хватает интерфейсных инструментов.

4. Asya.Ozerova 41 29.10.22 15:31 Сейчас в теме

(3)Если есть проблемы, пишите, думаю вместе мы сможем их решить!

5. salexdv 2336 30.10.22 12:12 Сейчас в теме

А зачем такие сложности, когда штатными средствами можно реализовать перетаскивание в обычное поле картинки на форме?

6. Asya.Ozerova 41 30.10.22 21:25 Сейчас в теме

(5)Пакетное тоже?

7. salexdv 2336 31.10.22 06:05 Сейчас в теме

(6) И пакетное тоже. Если перетаскивается несколько файлов, то в событии перетаскивания у поля картинки (таблицы значений и пр.) будет массив объектов с типом Файл, а дальше делаете с ними что хотите.