1

http://robertnyman.com/html5/fileapi-upload/fileapi-upload.htmlの例を使用して、アップロード目的でドラッグアンドドロップを使用する実装があります

動作時はこんな感じです。

droparea は、私が dropArea と呼ぶ div です。

問題は、ドラッグ アンド ドロップしたはずの 4 つの画像から外れているため、そのうちの 2 つを特別なステータスにするために選択したいと考えていました。たとえば、画像 1 と 3 がスニークであることをサーバーに通知したいとします。

既に div 要素にある画像 1 と 3 を 2 つの描画された div にドラッグ アンド ドロップできるようにしたい

http://cl.ly/image/3T3O410X2E40

私はこれまでこれを行うことができないことに気づきました。

主な理由は、dropArea div で作成された画像に ondragstart 属性を追加できないことです。

ドラッグ可能な属性を追加できます。

したがって、dropArea div にドラッグ アンド ドロップすると、このような HTML コードが得られます。

記載されているように、希望どおりの効果を得ることができますか?

そうでない場合、ドラッグ アンド ドロップを使用せずに同じ結果を得る別の方法はありますか? ドラッグ アンド ドロップした画像を右クリックして、スニークとして選択することはできますか?

更新: id 属性を追加する必要があることに気付いたので、dropArea 内の別のドラッグ アンド ドロップ画像のドラッグ アンド ドロップ効果が機能するようになりました。

しかし、元の画像ではなく、コピーをドラッグ アンド ドロップしたいのです。したがって、私はまだこれについて助けが必要です。

4

2 に答える 2

1

この質問は4年以上前のものだと思いますが、他の誰かがこの情報を必要とするかもしれません:)

シュリシャスターが Kim Stacks の回答に関するコメントで尋ねたように、「画像ではなくテキストに対して同じことを行うにはどうすればよいですか?」

これに対する修正は、Kim Stacks によって提供された dropcopy 関数の微調整です。

function dropcopy(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var copyimg = document.createElement("p");
var original = document.getElementById(data);
copyimg.innerHTML = original.innerHTML;
ev.target.appendChild(copyimg);

}

これを行うことで、元のパラグラフ コンテンツのクローンを作成します :)

これが少なくともいくつかの助けになることを願っています。

于 2016-06-05T09:55:03.450 に答える
0

この回答には2つの部分があります

  1. ドラッグアンドドロップされた画像に一意の id 属性を割り当てていることを確認してください
  2. http://www.w3schools.com/html5/html5_draganddrop.aspからコピーした次の JavaScript 関数を使用しますが、dropcopy と呼ばれる新しいものを含めます

これらは w3schools の例の関数です

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));
}

これはdropcopyの新しいものです

                    function dropcopy(ev)
                    {
                    ev.preventDefault();
                    var data=ev.dataTransfer.getData("Text");
                    var copyimg = document.createElement("img");
                    var original = document.getElementById(data);
                    copyimg.src = original.src;
                    ev.target.appendChild(copyimg);

                    }

次に、コピーが必要な div については、ondrop 属性に dropcopy を使用してください。

<div id="div2" class="sneaks" ondrop="dropcopy(event)"
                ondragover="allowDrop(event)"></div>
于 2012-09-04T08:56:58.773 に答える