5

純粋に Javascript を使用してネストされたドラッグ/ドロップ機能を作成する必要があります(Jquery や他のプラグインは使用しないでください)。

アイデアは、グループとしていくつかのdivタグを持ち、そのdivタグ/グループを別のdivタグ/グループの上にドラッグして、それ自体の中にサブグループを作成する機能を持つことです(そのグループの子として)許可されるサブサブの最大レベル私が話していることを説明するには、この Jquery Plugin NestedSortabled の例を見てください。これは、私が探しているものを正確に定義しています。

NestedSortable Jquery の例

別の同様の例: http://dbushell.com/2012/06/17/nestable-jquery-plugin/

上記の例とまったく同じように機能するようにコードを開発する必要がありますが、純粋に古い学校の JavaScript のみを使用して、Jquery コードを提案しないでください。

これが私が現在取り組んでいるものですが、私は今立ち往生しており、サブグループ化機能を機能させる方法を理解できません。助けてください！！

私の作業デモ: http://jsbin.com/IzAfutI/1

私の作業デモ + コード: http://jsbin.com/IzAfutI/3/edit?html,css,js,output

編集：

コードの例をさらに詳しく見てみましょう。StartDrag と StopDrag には、機能の背後にある主なロジックが含まれています。基本的に、ユーザーがdivタグをドラッグすると、現在、ドラッグして配置するアイテムの既存のdivタグの上または下にコンテナーを作成していますが、この同じ機能を使用して別のコンテナー内にそのコンテナーを作成すると(サブグループの作成により) エラーが発生します。つまり、問題に間違った方法で取り組んでいる可能性があり、ロジックが間違っているか、コードに何か問題がある可能性があります。

グループ div タグの HTML マークアップ:

<div class="dragContainerUsed">
    <div id="a7b94a42-fb00-4011-bd5a-4b48e6e578c5" class="dragPanel">
        <input type="hidden" value="1|fa7989d7-1708-4a90-9bf6-c91f6cef6952" />
        <div onmousedown="startDrag(event, this.parentNode)" class="dragPanelHeader">
            <div style="margin-left:4px; margin-top:3px; float:left;">1 - Group 1<span id="gta7b94a42-fb00-4011-bd5a-4b48e6e578c5"></span></div>
        </div>
    </div>
    <div class=\"dragSubContainerUnUsed\"></div>
</div>
<div class="dragContainerUnUsed"></div>

だから私がしたいのは、ユーザーが別の div を div の上にドラッグすると、dragSubContainerUnUsed はそのサブコンテナ内に配置する必要があります....

ドラッグの開始時に、すべてのコンテナーとサブコンテナーを格納する配列を作成します。

containers = new Array();

subContainers = new Array();

containers.push(dragTarget);
for (i = 0; i < divs.length; i++) {
    if (divs[i].className.toLowerCase() == "dragcontainerunused") {
        containers.push(divs[i]);
    }
}

for (i = 0; i < divs.length; i++) {
    if (divs[i].className.toLowerCase() == "dragSubcontainerunused") {
        subContainers.push(divs[i]);
    }
}

現在、私が立ち往生している部分は関数onDragにありstopDrag、サブグループを作成するためにサブコンテナを機能させる方法がわかりません...

たとえば、グループ 3 をグループ 2 の上にドラッグすると、グループ 3 を 2 のサブグループにする必要があります。次のようにします。 ここに画像の説明を入力

各サブグループに最大 4 つのグループを追加できるはずです。最大 4 つのサブグループがあります。このような： ここに画像の説明を入力

そして最後に、次のようなサブグループ化のレベルは最大 4 つだけにする必要があります。 ここに画像の説明を入力

問題を特定できる場合は教えてください。または、コードのロジックを変更する必要がある場合は、教えてください。これを作成するために独自の新しいコードを完全に書き直す/作成できる場合でも、できる限り助けてください。アプリケーション作業は非常に高く評価されます。私は数日間これに取り組もうとしていますが、すべての助けが大いに受け入れられます...

4

4 に答える 4

2

このコードを確認してください

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


}


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>"

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">`
于 2013-10-16T10:08:06.610 に答える
1

これに取り組んでいて、数か月前に完了しました。しかし、この投稿を忘れていました。そのため、この楽しみに対する答えを探している可能性のある他の人のために、完全なソリューションを投稿することにしました。

コード全体は長すぎてここに掲載できませんが、コードへのリンクは次のとおりです: Drag/Drop Functionality with Div Tags

デモ: http://jsbin.com/aTUHULu/1

于 2013-11-05T19:47:17.157 に答える
0

ドロップ長方形を 4 つの領域に分割する必要があります。最初の領域にドロップするとレベル 1 になり、次の 40px にドロップするとレベル 2 と見なされるため、

于 2013-09-18T20:41:26.263 に答える
-1

必要に応じてコードも投稿しますが、試して実装すればアプローチ自体はうまくいくと思います。これがアプローチです

div の代わりに、項目を listitem として追加します

  • . これにより、コントロールが自動的に意図され、最後に解析するのが非常に簡単になります。ここで行う必要があるのは、onDrop で、div からテキスト (およびその他のプロパティ) を取得し、li を作成して、その li に div を追加することです。これにより、コードで div をさらに再ドラッグ アンド ドロップできます。注 - ドラッグが終了したら、必ず li (または div の親に応じて ul) を削除してください。

    • 于 2013-09-14T19:26:39.153 に答える