domツリーの特定の位置に動的に作成されたドロップされた要素をプッシュ

Question

こんにちは、私はドラッグアンドドロップに関する質問があります。私は、ドラッグアンドドロップだけでウェブサイトを作成するためのアプリケーションを作成しています。私はちょっとユーザーが特定の位置に要素をドロップすることができる機能を実装しています。ドロップされた要素の下の要素は下に移動します。今問題は、要素が動的に生成されることです。例えば、 。右側のパネルにはイメージの形式で異なるコンポーネントがあり、それらの要素をドラッグするといくつかのメタデータが渡され、要素がドロップされると、メタデータに基づいてhtml要素が作成されます。

<div class="drop-zone"> 
    <div> 
    <!--container 1--> 
    </div> 
    <!-- now i want to drop that element in between which is generated dynamically --> 
    <div> 
    <!--container 2--> 
    </div> 
</div> 

***************** EDIT ************************* JSONオブジェクトは、同様の機能を文字列化するために使用される****以下のコード・ヘッダ・ドロップで

がドラッグされる指令である、JSONfnは同じである

(function(){ 
define(['../../../../app','./../service/header.factory.js'],function(app){ 
    app.directive('headerDrop',['HeaderFactory',function(HeaderFactory){ 
     return { 
      restrict: "E", 
      replace: false, 
      scope: {}, 
      link: function(scope,element,attrs) { 
       element.on('dragstart',function(e){ 
        e.originalEvent.dataTransfer.setData("data",JSONfn.stringify(HeaderFactory)); 
       }); 
      }, 
      template: "<img id='header' draggable='true' src='/src/create_template/images/noimage.jpg' width='100' height='100'> </img>" 
     } 
    }]); 
    app.directive('dragContainer',function(){ 
     return { 
      restrict: "E", 
      replace: false, 
      scope: {}, 
      template: "<div id='elements-container'> <h1 style='text-align:center;'> All </h1><header-drop> </header-drop> </div>" 
     } 
    }); 
}); 

}）（）

私は後で答えを見つけたものの

は、コントローラ

element.on('drop',function(event){ 
     console.log(event); 
     if(event.target.className !== "drop-zone"){ 
      event.preventDefault(); 
      return false; 
     } 
     var data = JSONfn.parse(event.originalEvent.dataTransfer.getData("data")); 
     if(data.type=="header"){ 
      var heading = document.createElement("h1"); 
      console.log("client height" , heading.clientWidth); 
      heading.innerHTML = data.textValue; 
      //console.log("pageY",event.pageY); 
      //console.log("pageX",event.pageX); 
      heading.style.position = "relative"; 
      heading.style.top = ((event.pageY/window.innerHeight)*100)+ "%"; 
      heading.className = "editable"; 
      event.target.appendChild(heading); 
      heading.style.top = event.clientY; 
      addingEvents(); 
     } 
    }); 

Answer 1

内部まあ、私は実際には単純なアプローチでこの問題に取り組みました。

このアプローチは、私が要素を落とした時はいつでも私は、私は高さのデザイナーの内側にもう一つのブロックを落下させた何をしたか、私のため

単純なアプローチ

を働いていたので、私はテンプレートジェネレータを作っていました要素のすぐ上に5個あります。

<div class="adjacent-block"> </div> inside css .adjacent-block {min-height: 5px; } 
<div class="dropped-block"> </div> 

次に、その要素を隣接ブロック内にドロップします。

短所：あなたはまた、隣接するブロックを追跡している

上記の方法は、PRETTY哀れだったと私はTHAT

より簡単に、より良いアプローチ行うには誰にもお勧めしません：

を

dragoverイベントの中で、要素が別の要素の上にあるかどうかをチェックし、その要素の中間からマウスの位置に従って要素の前後にブロックをドロップするだけです。

私はこのアプローチを実装していないが、私は、これは、「メタデータ」は、あなたがコメントノードを参照していることで