如何将多个单词拖到一起答案

【问题标题】：How to drag multiple words together如何将多个单词拖到一起
【发布时间】：2017-01-09 02:26:51
【问题描述】：

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

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

只有 1 个文本值，使用本机浏览器拖放支持从 exif 数据列表移动到文本输入字段不是问题。但是像“水花红绿”这样的2个或更多文本值，对于残障人士来说就更困难了。

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

欢迎任何想法、示例和帮助。

【问题讨论】：

标签： php html input drag-and-drop

【解决方案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 网站上找到了这个基本逻辑。我调整并增强了拖放功能以获取锚文本和扩展目标。此外，我向已删除的链接添加了一个特定的类，以表明该链接已被使用。

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;
}

没什么特别的。只是链接周围的绿色框。删除的链接会出现一个蓝色框。 word-break、word-warp 和 hyphens 的设置是为了避免在方框中出现换行符。

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 }}'
 />

再次，您需要相应地设置 {{ ... }} 字段！这里我们有 2 个 drop 对应物 ondrop 和 ondragover。

嗯，拿到手之后就很简单了。但是直到你找到信息......;-)

希望对其他人也有帮助。

【讨论】：

小更新。在 CSS a.exif_items 你还应该添加 white-space: nowrap;