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 = "<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

–

См. также

Управление доставками 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С.

18000 руб.

10.03.2016 52778 268 95

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

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

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

19200 руб.

22.03.2017 34540 13 47

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

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

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

12000 руб.

02.02.2021 15191 41 49

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

Обмен с ГосИС 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 86559 154 211

309

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

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

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

6800 руб.

17.11.2015 113011 331 133

206

Merlion Commander Версия 1.3.9.2 - июль 2022 г. (Интеграция с 1С: УT, редакция 11.4, 1С:Розница 2.3,1С:ERP Управление предприятием 2, УТ 10.3, редакция веб-сервиса MERLION API 3.0 от 18.08.2021)

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

Расширении конфигурации "Управление торговлей, редакция 11" для работы с веб-сервисом Мерлион с помощью Merlion API. Расширение и набор подключаемых дополнительных обработок позволяет без изменения конфигурации получить возможность работы с API крупнейшего российского дистрибьютора http://merlion.com. Логика работы максимально приближена к работе веб-сервиса b2b. Вы сможете создать и исправить заказ, зарезервировать товар прямо из 1С, посмотреть актуальные остатки и цены, импортировать штрихкода EAN13 товаров, загружать заказ c автоматическим созданием номенклатуры в 1С и корректности создания. Можно выбирать характеристики по товарным группам и загружать товар с выбранными характеристиками, загружать изображения товара. Не требуется установки дополнительного ПО для работы с веб-сервисом. Кроссплатформенное решение для ОС Windows и Linux. Весь код модулей открыт и доступен для просмотра и внесения изменений.

8280 руб.

02.05.2017 38315 42 64

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

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

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

6000 руб.

30.01.2019 23676 39 5

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

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

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015 60857 41 57

Комментарии

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

Свернуть все

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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