3

簡単なグラフィックを作成するための一種の視覚的インターフェイスを作成しようとしています。10 個の画像アイコンと、それらのアイコンを配置できる 5 つのボックスで構成されます。ユーザーが 10 個のアイコンから表示したいものを選択し、ドラッグ アンド ドロップを使用して要素を適切に配置できるようにしたいと考えています。5 つのアイコンは、アイコンをドロップできる div 内にもあるため、気が変わって別のアイコンを選択したい場合は、アイコンを「ホーム」行に戻すことができます。

この簡単なチュートリアルとは異なりますが、より多くの div とアイコンがあります: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

私のスクリプト：

<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
//CSS CHANGES HERE FOR ON PICKUP
$( ".dragfive" ).css("border", "2px solid #ff9d00");
$( ".select5" ).css("border", "2px solid #ff9d00");
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
//CSS CHANGES HERE FOR ON DROP
$( ".dragfive" ).css("border", "2px solid transparent");
$( ".select5" ).css("border", "2px solid transparent");
}
</script>

私のコードはチュートリアルとまったく同じですが、コメントが示すようにいくつかの素敵な CSS 変更を追加しました。アイテムを配置できる場所をユーザーに示すために、カラフルな境界線が表示されるようにしました。これらはドロップすると透明になります。を除いて完全に動作します...

  1. アイコンが別のアイコンの上にドロップされないようにするにはどうすればよいですか? (というか、アイコンを空の div にドロップすることのみを許可しますか?)
  2. 2 番目のアイコンのセットを作成してプロセスを複製したい場合、それらと許可されたドロップ領域を分離するにはどうすればよいですか? (アイコンが意図しない場所に配置されないように)

本当にありがとう。

4

4 に答える 4

2

これを使用してください、それは私のスクリプトで機能しました...すでに何かが含まれているdivのドロップを防ぐために-image.

if (ev.target.hasChildNodes()) {
    ev.target.appendChild(document.getElementById(data));
}
于 2015-05-01T06:18:50.847 に答える
0

これを解決するために私がしたことはおそらく奇妙ですが、うまくいきました! 私はちょうどこの機能を作った：

function testDiv(ev, x) {
    if (x.length > 0) {
        return false;
    }
    else {
        allowDrop(ev);
        return true;
    }
}

を呼び出す前に、この関数を呼び出しますallowdrop。のxです。それは私にとって完璧に機能します！innerHTMLdiv

于 2015-06-28T15:47:00.110 に答える
0

追加するだけで終わった

ev.target.appendChild(document.getElementById(data).cloneNode(true));

アイコンを失わないように、ドロップコマンドの最後まで。意図したターゲット div の子ノードに基づいて、取得したデータがドロップされるのを防ぐことができなかったため、これは問題 1 の回避策です。オーバーライドを防ぐことができましたif (ev.target.hasChildNodes()) { return; }

、しかし、私が望んでいたようにドロップを拒否するのではなく、ドラッグで拾ったデータを失うことになります. 代わりに上記のコードでそれらをコピーすることが最善の回避策でした。要素を順不同でドロップするという問題は、ID のタイプミスが原因でした。アイコンをグループに分割するスコットの方法は完璧に機能しました。

于 2013-10-15T15:33:58.407 に答える