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 –

См. также

Интеграция системы Datamart завода Москвич и Альфа-Авто, редакции 5 и 6

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

Обмен данными Datamart завода Москвич и автодилера на Альфа-Авто, ред.5 и 6

240000 руб.

01.08.2023 2555 2 0

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

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

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

36000 руб.

03.08.2020 17780 19 22

Интеграция 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 120240 379 139

224

Интеграция 1С и Битрикс 24 — модуль синхронизации для обмена задачами

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

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

5040 руб.

04.05.2021 19844 13 17

Сервисы 1СПАРК Риски и 1С:Контрагент для «старых» конфигураций

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

Доступ к сервисам 1СПАРК Риски и 1С:Контрагент в «старых», но широко используемых конфигурациях.

6000 руб.

30.01.2019 25019 47 5

SALE! 15%

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

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

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

~~16800~~ 14280 руб.

22.03.2017 38745 18 49

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

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

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

22656 руб.

25.05.2021 14421 42 8

Конструктор API для обмена базы 1С 8.3 с другими системами по протоколу http в формате JSON

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

Расширение значительно упрощает написание API на 1С. Веб программисты получают простой и понятный доступ к 1С. Описание API создаётся автоматически и представляется в виде удобном как для человека, так и для программной обработки.

24000 руб.

27.09.2024 1169 1 0

Комментарии

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

Свернуть все

1. user1203706 14 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 2357 30.10.22 12:12 Сейчас в теме

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

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

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

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

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