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

10.10.22

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

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование		По подписке [?]	Купить один файл
Drag & Drop - Переносим Картинку на Форму с помошью мыши (HTML + JS): .epf 8,72Kb 9	9	Скачать (1 SM)	Купить за 1 850 руб.

В продолжение темы "Картинка на форме с масштабированием при наведении курсора" предлагаю рассмотреть вариант взаимодействия с 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

+21 –

См. также

Веб-портал "Онлайн-заказ" для 1С

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

Онлайн-заказ - это решение для автоматизации процесса оформления заказов на сайте в торговых организациях. Продукт обеспечивает легкое взаимодействие между компанией и клиентами через веб-интерфейс, интегрированный с 1С:Предприятие. Система позволяет снизить операционные расходы, повысить лояльность клиентов и оптимизировать работу отдела продаж.

57600 руб.

26.11.2024 1559 1 1

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

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

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме.

36000 руб.

03.08.2020 18573 20 22

Интеграция 1С с API СДЭК, Деловые Линии, ПЭК, Boxberry, Почта России и др. Управление доставками в 1С 8.3

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 63879 308 98

Функционал задач в Битрикс24 у Вас в 1С

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

Интеграция 1С и Битрикс 24. Разработка имеет двухстороннюю синхронизацию 1С и Bitrix24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (платформа начиная с 8.3.23): 1С:Управление торговлей, 1С:Управление Нашей фирмой 3, 1С:Комплексная автоматизация 2, Объединенное решение: Модуль 1С:CRM 3 (3.0.21.3) +1С:ERP Управление предприятием 2. При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

7200 руб.

04.05.2021 20716 13 19

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

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

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

16800 руб.

22.03.2017 39575 19 50

Интеграция 1С с OpenCart 2.x, 3x — модуль обмена данными

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

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

6800 руб.

17.11.2015 121433 380 139

224

Экспортер — автоматизация выгрузки данных из 1С в Spot2D

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

Модуль "Экспортер" — это расширение для 1С, предназначенное для автоматизации процессов выгрузки данных. Оно позволяет эффективно извлекать, преобразовывать и передавать данные из систем 1С в интеграционную платформу Spot2D. Подсистема упрощает настройку, снижает количество ручных операций и обеспечивает удобный контроль данных.

14400 руб.

20.12.2024 477 2 0

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

Обмен с ГосИС 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 92197 184 217

337

Комментарии

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

Свернуть все

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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