1

タイトルで説明したように、「リスト」から画像をドラッグし（実際にはデータベースから画像をロードするdivにすぎません）、「ドロップゾーン」にドロップしたいと考えています。

願わくば、みんなが私の英語を理解してくれますように。

私の問題は次のとおりです。私は JavaScript と HTML5 がまったく初めてで、アプリケーションが部分的にしか機能しません。

画像をドラッグしてドロップゾーンにドロップします...これまでのところは問題ありません...しかし、転送された画像がリストから消えました->画像をコピー/クローンしたいだけです。

写真がドロップゾーンに配置された後、私の関数はドロップゾーンに写真を追加するだけです....「appendChild」がそれと関係があることは知っていますが、これを解決する方法がわかりません。

誰かが私を助けてくれたらとてもいいですよね?!

JavaScript コード:

//controls the beginning of an drag-event
function dragStart(ev)
{
    ev.dataTransfer.effectAllowed= "copyLink";
    ev.dataTransfer.setData("Text", ev.target.getAttribute("id"));
    return true;
}

//handles the dropzone
function dragEnter(ev)
{
 //avoids placing the element somewhere else (instead of in the dropzone)
    event.preventDefault();
    return true;
}

//handles dropping an element before the target area
function dragOver(ev)
{
    return false;
}

//handles the actual drop part (not working)
function dragDrop(ev)
{
    var eleid = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(eleid));
    ev.preventDefault();
    ev.returnValue();
}

HTML:

-鬼ごっこ：

<img id="person_id_'. $metaData["meta_id"] . '" draggable="true" "ondragstart= "return dragStart(event)" src="'. $path .'"/>

ドロップゾーン:

<div id= "dropzone" ondragenter= "return dragEnter(event)" ondragover= "return dragOver(event)" ondrop= "return dragDrop(event)"></div>
4

1 に答える 1

2

これは本当に jQuery のタスクです。純粋な HTML5 は、DOM 要素を表現する以上のことはできません。少なくとも、JavaScript は DOM 言語の修飾子です。最も便利なもの:) jQueryは、(主要なブラウザーでも) 理解したい複雑なタスクのほとんどを備えており、使用しないことを心配する必要はありません。

次のドキュメントを確認してください。

Dropables は、次のように、他の DIV 要素からのドラッグ可能なものを受け入れることができます: http://api.jqueryui.com/droppable/#option

幸いなことに、インターネットには、ほぼすべての jQuery 関数/サブ API について、何百もの異なる例があふれています。Google でいくつかの例を試してみてください。学習は非常に簡単です。この場合、jQuery-UI はメインの jQuery ライブラリーの拡張ですが、実に単純です。SCRIPT タグを追加するだけで、準備完了です。

于 2013-02-21T14:18:34.293 に答える