Question

我从图像中提取一些exif信息并在我的页面上显示它们（由php生成的html）。下面我有一些文本字段，用户可以在图像中添加一些信息。有些图像没有，有些图像只有1，还有一些其他多个exif信息。

最终目标是手动或使用已知但非结构化的exif数据填充文本字段。

只有1个文本值，使用本机浏览器拖放支持从exif数据列表移动到文本输入字段不是问题。但是有2个或更多的文本值，比如＆＃34; water flower，red＆amp;绿色＆＃34;，对于残疾人来说更难。

所以我在考虑将这样的多个文本值绑定在一起的可能性。尝试使用链接文本，但删除了href源而不是锚文本

欢迎任何想法，例子和帮助。

Answer 1

最后我明白了。也许它对其他人也有帮助，所以在下面我是如何做到的。

目标：允许拖放单词的组合，而无需先在之前标记它们。

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网站上找到了这个基本逻辑。我调整并增强了drop函数来获取锚文本并扩展目标。另外，我为删除的链接添加了一个特定的类，以表明此链接已被使用。

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个标签可拖动和ondragstart。

4）目标输入

<input type='text'
    name='{{ unique_field_name }}'
    id='{{ unique_field_id }}'
    size='35'
    ondrop='drop(event)'
    ondragover='allowDrop(event)'
    value='{{ field_value }}'
 />

再次{{...}}字段需要相应地设置！在这里，我们有两个对应的ondrop和ondragover。

嗯，你得到它之后非常简单容易。但直到你找到信息...; - ）

希望它对其他人也有帮助。

如何将多个单词拖到一起

1 个答案: