Как перетащить несколько слов вместе

Question

Я извлекаю некоторые exif-информации из изображения и показываю их на своей странице (html, сгенерированный php). Ниже у меня есть текстовые поля, где пользователь может добавить некоторую информацию к изображению. Некоторые изображения не имеют ни одного, некоторые другие только 1 и некоторые другие многочисленные данные exif.

Конечная цель - заполнить текстовые поля вручную или с уже известными, но неструктурированными данными exif.

Имея только 1 текстовое значение, это не проблема использовать родной браузер перетащить & поддержку перетаскивания для перемещения из списка данных EXIF ​​в поле ввода текста .. Но с 2 или более текстовых значений, таких как «водный цветок, красный & зеленый ", это труднее для людей с ограниченными возможностями.

Так что я думал о возможности связать такие множественные текстовые значения вместе. Пробовал связанный текст, но падает капли источника href, а не текст привязки

Любые идеи, примеры и помощь приветствуются.

Answer 1

Наконец-то я получил его. Возможно, это полезно и для других, поэтому ниже, как я это сделал.

Цель: Позволяет перетаскивать комбинацию слов без необходимости их первой маркировки.

1), ИС часть

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) СМЧ

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 тега draggable и ondragstart.

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.

Ну, довольно просто и легко после того, как вы его получите. Но пока вы не найдете информацию ... ;-)

Надеюсь, что это тоже полезно для других.