How to drag multiple words together - php

Question

I'm extracting some exif infos from an image and show them on my page (html generated by php).
Below that I have some text fields, where user can add some infos to an image.
Some images have none, some others only 1 and some other multiple exif informations.
Final target is to fill up the text fields, either manually or with already known - but unstructured - exif data.
Having only 1 text value, it is not a problem to use the native browser drag&drop support to move from list of exif data into text input field..
But with 2 or more text values like "water flower, red & green", it is more difficult for handicaped people.
So I was thinking about a possibility to bound such multiple text values together.
Tried with a linked text, but dropping drops the href source and not the anchor text
Any ideas, examples and help is welcome.

Answer 1

Finally I got it.
Maybe it is helpfull for others too, so here below how I did it.
The target:
Allow to drag and drop a combination of words without the needs of first marking them before.
1) the JS part
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' );
}
This base logic I found on w3schools website.
I adapted and enhanced drop function to get the anchor text and extend target. In addition I add a specific class to dropped links to indicate that this link has been used already.
2) the 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;
}
nothing special. Just a green box around the links. Dropped links get a blue box. The word-break, word-warp and hyphens are set to avoid line breaks in the boxes.
3) the links for the exifs
<a id='{{ unique_exif_item_key }}'
href='#'
class='exif_items'
draggable='true'
ondragstart='drag(event)'
>{{ exif_item_text }}</a>
the {{ ... }} fields needs to be set by you accordingly!
Also nothing special here, just the 2 tags draggable and ondragstart.
4) the target inputs
<input type='text'
name='{{ unique_field_name }}'
id='{{ unique_field_id }}'
size='35'
ondrop='drop(event)'
ondragover='allowDrop(event)'
value='{{ field_value }}'
/>
Again the {{ ... }} fields needs to be set by you accordingly!
Here we have the 2 drop counterparts ondrop and ondragover.
Well, quite simple and easy after you get it. But until you find the info ... ;-)
Hope it is helpfull for others too.