ソースDOM要素が削除されたときに、どのようにondragendをシミュレートできますか？

Question

挨拶すべて

プロジェクトのコンテキスト

我々はHTML5タイプスクリプトベースのAngular2プロジェクトにドラッグ＆ドロップに関する問題を抱えているが、この問題は、DOM操作の問題に可能性があります。私たちのWebアプリケーションでは、コンポーネントのグループを並べ替える必要があり、デザイナーのグループ間で移動する必要があるページがあります。

この「デザイナーの」出力HTML

はそうのように構成されています

<div> 
    <div class="col1"> 
     <div class="group1"></div> 
     <div class="group2"></div> 
    </div> 
    <div class="col2"> 
     <div class="group3"></div> 
     <div class="group4"></div> 
    </div> 
</div> 

各「グループ」は、共有dragGroupの状態を扱うはdragstart、dragoverイベントとdragendイベントを定義します。

間伐コード

public DragStart(source: Group): void 
{ 
    this.dragGroup = source; 
} 

public DragOver(source: Group): void 
{ 
    // Reorders the groups appropriately 
    // Changes the state of the model, such that angular2 will render the DOM differently 
} 

public DragEnd(): void 
{ 
    this.dragGroup = null; 
} 

問題

我々は別のグループに移動し、ドラッグされているグループは、DOM、最も重要なビットから削除されたときに、問題を絞り込んています。

ドラッグ端が焼成されたときの例：グループ1とグループ2は

が発射しないドラッグ終了である場合の例

をスワップさ：GROUP1クエリ

COL2に移動します

• なぜ最初の例が機能するのですか/なぜ同じ順序で並べ替えが行われるのですか グループワーク？
• 私が望む結果を得るために作業プロセスを変更できるベストプラクティスの方法はありますか？
• また、不足している引っ張りをシミュレートするために私が使用することができる生意気なハックはありますか？

ありがとうございます。それ以上の情報が必要な場合は、お尋ねください。

Answer 1

いいえ、

私は自分自身を「恐ろしい」解決策に仕上げました。誰かがより良い解決策を取るとすぐに、私は彼らの答えを受け入れます。

最も外側のdiv（すべての列を含むdiv）では、ドラッグ中にマウスの状態を判断するのに役立つ3つのイベントを登録します（mousemove, mousedown and mouseup）。

次のAngular2 Template HTMLは、このソリューションを示しています。通常のHTMLでは、イベントのまわりに角カッコが付かず、各イベント名の前に「on」が付いています。

<div (mousemove)="CheckIfDragEnded()" 
    (mousedown)="SetMouseDown(true)" 
    (mouseup)="SetMouseDown(false)"> 
    <div class="col1"> 
     <div class="group1"></div> 
     <div class="group2"></div> 
    </div> 
    <div class="col2"> 
     <div class="group3"></div> 
     <div class="group4"></div> 
    </div> 
</div> 

そして、次の活字体になります（再び、これは簡単にはJavaScriptで書かれていても大丈夫）

// Some storage state variable 
private mouseDown: boolean = false; 

private SetMouseDown(down: boolean): void 
{ 
    this.mouseDown = down; 
} 

private CheckIfDragEnded(): void 
{ 
    if (this.mouseDown) 
    { 
     // Call the drag end method here that should have been triggered by the drag end normally 
    } 
} 

少量の添加は、マウスのボタンをチェックすることですまた、左クリックです。