Как перетащить несколько слов вместе
Я извлекаю некоторую информацию exif из изображения и показываю их на своей странице (html, сгенерированный php).
Ниже у меня есть несколько текстовых полей, где пользователь может добавить информацию к изображению.
Некоторые изображения не имеют ни одного, некоторые другие только 1 и некоторые другие множественные данные EXIF.
Конечная цель — заполнить текстовые поля вручную или уже известными, но неструктурированными данными exif.
Имея только 1 текстовое значение, использование перетаскивания в браузере не проблема&Отключить поддержку для перемещения из списка данных EXIF в поле ввода текста.
Но с 2 или более текстовыми значениями, такими как «цветок воды, красный & зеленый », труднее для людей с ограниченными возможностями.
Поэтому я думал о возможности связать такие множественные текстовые значения вместе.
Пробовал со связанным текстом, но при удалении удаляется источник href, а не текст привязки
Любые идеи, примеры и помощь приветствуются.
Решение
Наконец то я понял.
Может быть, это полезно и для других, так что здесь ниже, как я это сделал.
Цель:
Позволяет перетаскивать комбинации слов без необходимости предварительно помечать их раньше.
1) часть JS
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var id = ev.dataTransfer.getData("text");
var addtext = document.getElementById(id).innerHTML;
var oldtext = document.getElementById(ev.target.id).value;
if ( oldtext )
{
ev.target.value = oldtext + ', ' + addtext;
}
else
{
ev.target.value = addtext;
}
$( '#' + id ).addClass( 'dropped' );
}
Эту базовую логику я нашел на сайте w3schools.
Я адаптировал и улучшил функцию перетаскивания, чтобы получить якорный текст и расширить цель. Кроме того, я добавляю определенный класс к удаленным ссылкам, чтобы указать, что эта ссылка уже использовалась.
2) CSS
a.exif_items {
border-radius: 25px;
background: #73AD21;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
word-break: keep-all;
word-wrap: normal;
hyphens: none;
}
a.exif_items:visited ,
a.exif_items:hover ,
a.exif_items:active ,
a.exif_items:link {
text-decoration: none;
}
a.exif_items:hover {
font-weight: 600;
color: black;
}
a.dropped {
background: #21AEAE;
}
ничего особенного. Просто зеленая рамка вокруг ссылок. Отброшенные ссылки получают синее поле. Разрыв слова, деформация слова и дефисы установлены, чтобы избежать разрывов строк в полях.
3) ссылки на exifs
<a id='{{ unique_exif_item_key }}'
href='#'
class='exif_items'
draggable='true'
ondragstart='drag(event)'
>{{ exif_item_text }}</a>
поля {{…}} должны быть установлены вами соответственно!
Тоже ничего особенного, только 2 тэга и перетаскивание.
4) целевые входы
<input type='text'
name='{{ unique_field_name }}'
id='{{ unique_field_id }}'
size='35'
ondrop='drop(event)'
ondragover='allowDrop(event)'
value='{{ field_value }}'
/>
Опять же, поля {{…}} должны быть установлены вами соответственно!
Здесь у нас есть 2 капельных аналога ondrop и ondragover.
Ну, довольно просто и легко после того, как вы получите это. Но пока вы не найдете информацию … 😉
Надеюсь, что это полезно и для других.
Другие решения
Других решений пока нет …
detector