複数の単語をまとめてドラッグする方法

Question

イメージからいくつかのexif情報を抽出し、それらを私のページ（phtmlで生成されたhtml）に表示します。 私はいくつかのテキストフィールドを持っています。ここで、ユーザーは画像にいくつかの情報を追加できます。 一部の画像には、一部の画像には1つの画像とその他の複数のexif情報があります。

最終的なターゲットは、手動で、または既に知られている - しかし非構造化 - exifデータでテキストフィールドを埋めることです。

exifデータのリストからテキスト入力フィールドに移動するには、ネイティブブラウザのドラッグ&ドロップサポートを使用することは問題ありません。 「water flower」のような2つ以上のテキスト値を使用すると、赤い&緑 "、それはハンディキャップのついた人々にとってより難しいです。

私はこのような複数のテキスト値を結合する可能性について考えていました。 リンクテキストで試しましたが、アンカーテキストではなく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のウェブサイト上で見つかったこの基本ロジック。 私は、アンカーテキストを取得してターゲットを拡張するためのドロップ機能を改良しました。さらに、このリンクが既に使用されていることを示すために、ドロップされたリンクに特定のクラスを追加します。

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

は再び{{...}}フィールドはそれに応じて自分で設定する必要があります！ ここでは、2滴の対応物をondropとondragoverを持っています。

あなたはそれを手に入れた後、かなりシンプルで簡単です。しかし、あなたが情報を見つけるまで... ;-)

他人にも有益です。