3

次の機能を持つページを開発しようとしています。

ページには 2 つの列があります。1 つは #origin (左の列) で、四角形 (変数を表す) のリストを含み、2 つ目は #drop (右の列) で、四角形をドロップできる入力を含みます。

ここに画像の説明を入力

必要な結果を得るために、 jquery ui draggableとjQuery Tokeninputの 2 つのプラグインを使用することを考えました。

<li>問題は、rectangle( ) を入力フィールドにドロップすると、タグとして表示されるようにするにはどうすればよいかということです。同じ要素を使用しても問題ありません。<li>ただし、(式を完成させるために) 入力にさらにテキストを入力できる限り、後でユーザーが気が変わって、変数 (タグ) が自分のものではないと判断した場合または、彼女が望むように、ページでタグを削除できるようにする必要があります (右上隅の「X」をクリックするか、左側の列の元の場所にタグを戻すことによって)。

誰かがすでに似たようなことをしていて、私にいくつかのガイダンスを与えることができますか?? または、誰かがこれについて別のアイデアを持っていますか?

どんな助けでも大歓迎です。

PS同じ入力でテキストとタグを組み合わせることができる他のタグ付けプラグインを知っている場合は、私に知らせてください.

4

4 に答える 4

0

適切な「非表示」の入力を使用し、通常のドラッグ アンド ドロップに別の div を使用できます。

<input type="hidden" name="valDrop" value="" id="valDrop"></input>
<div id="divDrop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

次に、ドロップ イベントが発生したときに、JavaScript で入力の値を設定します。

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
var val=document.getElementById("valDrop");
val.value=data;
}
于 2013-12-09T08:53:02.110 に答える
0

私は似たようなことをしました。入力ボックスについては、使用しませんでし<input></input>たが、一部の div 要素で contenteditable 属性を使用しています。

私はjQuery-UIを信じています。ドロップ可能な要素に登録されたイベントがあります。そのイベント リスナーで、ドラッグされた要素を複製し、コンテナーの子として作成するコードを配置します。相対位置で配置します。

レイアウトはだいたいこんな感じ

<div id="1">
 <span id="2">
  <div id="3" contenteditable="true">
     <!-- where user can type something like > 18 etc -->
  </div>
 </span>
</div>

ユーザーがタグをドラッグすると、droppable の drop イベントが発生します。タグのクローンを作成する (または新しいタグを作成する) コードを作成しinsertBefore($("#3"))、jQuery のメソッドで id="2" の下に配置します。

別のタグが来たら、別のinsertBefore($("#3")). そのため、ボックスにタグがある場合でも、ユーザーは入力できます。彼/彼女が入力したものは、次のように取得できます$("#3").text();

于 2013-08-25T14:21:42.863 に答える