Php 如何将多个单词拖到一起_Php_Html_Input_Drag And Drop

Php 如何将多个单词拖到一起

php html input

Php 如何将多个单词拖到一起,php,html,input,drag-and-drop,Php,Html,Input,Drag And Drop,我正在从一个图像中提取一些exif信息，并将它们显示在我的页面上（由php生成的html）。下面是一些文本字段，用户可以在其中向图像添加一些信息。有些图像没有，有些图像只有1，还有一些图像有多个exif信息最终目标是手动或使用已知但非结构化的exif数据填充文本字段由于只有1个文本值，使用本机浏览器拖放支持从exif数据列表移动到文本输入字段并不是问题。。但是有两个或更多的文本值，如“水花、红色和绿色”，这对残疾人来说更加困难所以我在考虑一种可能性，将这样多个文本值绑定在一起。尝试

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

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

由于只有1个文本值，使用本机浏览器拖放支持从exif数据列表移动到文本输入字段并不是问题。。但是有两个或更多的文本值，如“水花、红色和绿色”，这对残疾人来说更加困难

所以我在考虑一种可能性，将这样多个文本值绑定在一起。尝试使用链接文本，但删除会删除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网站上找到的基本逻辑。我调整并增强了drop函数，以获取锚文本并扩展目标。此外，我还向删除的链接添加了一个特定的类，以表明该链接已经被使用

2） CSS

没什么特别的。只是链接周围的一个绿色框。删除的链接会得到一个蓝色框。设置单词打断、单词扭曲和连字符以避免框中出现换行

3） EXIF的链接

<a id='{{ unique_exif_item_key }}' 
    href='#'
    class='exif_items'
    draggable='true'
    ondragstart='drag(event)'
>{{ exif_item_text }}</a>

{{…}}字段需要由您相应地设置！这里也没什么特别的，只有两个标签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 }}'
 />

{{…}}字段同样需要由您相应地设置！在这里，我们有两个下降对应ondrop和ondragover

嗯，在你得到它之后，非常简单和容易。但在你找到信息之前…；-）

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

我终于得到了它。也许这对其他人也有帮助，所以下面是我是如何做到的