1

http://jsfiddle.net/Hh8qJ/で問題が発生しています私は2つの大きな問題を知っています。1 つは Safari (およびおそらく Internet Exploder) では機能しません。Safari のオプションをドラッグ可能なオブジェクトにすることができないようですか? また、Firefox では、オプションをドロップしても選択が解除されません。これはより大きなプロジェクトの一部であるため、私が達成しようとしていることと、なぜその道を進んだのかについて説明します。そこで、ドロップダウンを選択して、そこから要素を挿入したり、必要に応じてアイテムをドロップダウンの別の場所に配置したりできるようにしました。大規模なプロジェクトでは、これらのドロップ ダウンは 1 つだけで、多くのドロップ ゾーン div があります。項目はドロップダウンからこれらのドロップ フィールドの多くにドラッグされますが、場合によっては逆方向に移動する必要がある場合があります。これを行うためのより良い方法があるかどうかはよくわかりませんが、これが私が思いついたものです。

ご協力ありがとうございました！

編集: コードを入力する必要があり、誰もここに完全なファイルを望んでいないと判断したため、HTML はそこにありました。

これが実際にどのように使用されるかについて、より簡潔な例を挙げようと思います。車の名前が付いた 4 つのボックスがあるとします。ボックスには、サーブ、ボルボ、フォード、ダッジと書かれています。タスクは、ドロップダウンからすべての車を適切なドロップゾーンにドラッグすることです。次に、ユーザーが車をドロップダウンに戻したい場合は、ドロップ ゾーンからドロップダウンにドラッグして戻すと、アルファベット順に配置されます。(現在、アルファベット化を行うコードがないことはわかっていますが、一度に 1 つのハードルを試していました。) これは、はるかに大きなプロジェクトでこれを使用する計画がある非常に小規模な例であることを覚えておいてください。これは、私が抱えている問題をできるだけ単純にするために行っている試みにすぎません。

  <html>
4

1 に答える 1

1

これが私の解決策です：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:150px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
 ev.preventDefault();
}

function drag(ev)
{
 ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
 ev.preventDefault();

 var data=ev.dataTransfer.getData("Text");
 ev.target.appendChild(document.getElementById(data));
}
function sort(uList)
{
  var listItem = document.getElementById(uList).getElementsByTagName('li');
  var listLength = listItem.length;
  var list = [];
  for(var i=0; i<listLength; i++)
  list[i] = listItem[i].firstChild.nodeValue;
  list.sort();
  for(var i=0; i<listLength; i++)
  listItem[i].firstChild.nodeValue = list[i];
 }
</script>
</head>
<body>

<ul id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragend="sort('div1')">

    <li id="list-item3"  draggable="true" ondragstart="drag(event)">a</li>
    <li id="list-item5" draggable="true" ondragstart="drag(event)">b</li>
    <li id="list-item2" draggable="true" ondragstart="drag(event)">c</li>
    <li id="list-item4" draggable="true" ondragstart="drag(event)">d</li>
</ul>
<ul id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ondragend="sort('div2')"></ul>

</body>
</html>

私はそれが役立つことを願っています:)。私はそれにHTML 5を使用しました。項目が 1 つのリストから別のリストにドラッグされた後、関数 sort() が呼び出されます。この関数は、リスト内の項目をソートする関数になります。フォーム要素でまだ試していませんが、何ができるかわかりません。

于 2012-10-23T09:13:22.037 に答える