ドラッグしてページの周りのコンポーネントを移動しますか？

Question

私は、ユーザーがページに配置するためにいくつかのデータを入力できるようにするポップアップダイアログボックスコンポーネントを定義しています。最終結果は、画面上のボタンがクリックされたときに表示され、ページの周りをドラッグすることもできます。私はここに、まだこのコンポーネントの多くを持っていない

はそれのためのコードです：

//edit-global-names-dialog-box.component.ts 

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'edit-global-names-dialog-box', 
    templateUrl: './edit-global-names-dialog-box.component.html', 
    styleUrls: ['./edit-global-names-dialog-box.component.css'] 
}) 
export class EditGlobalNamesDialogBoxComponent implements OnInit{ 

    constructor() {} 

    ngOnInit() { 
    } 
} 

//edit-global-names-dialog-box.component.html 

<div id="dialog-box-container"> 
    <div id="header"> 

    </div> 
    <div id="content"> 

    </div> 
    <div id="footer"> 

    </div> 
</div> 

//edit-global-names-dialog-box.component.css 

#dialog-box-container { 
    height: 12%; 
    width: 25%; 
    z-index: 2 !important; 
    position: absolute; 
    background-color: lightgrey; 
    right: 50%; 
    bottom: 50%; 
    transform: translate(45%,-50.1%); 
    -moz-box-shadow: 8px 8px 8px #d9d9d9; 
    -webkit-box-shadow: 8px 8px 8px #d9d9d9; 
    box-shadow: 8px 8px 8px #d9d9d9; 
} 

#header { 
    border: 0.5px solid dimgrey; 
    border-bottom: none; 
    height: 20%; 
} 

#content { 
    border: 0.5px solid dimgrey; 
    border-bottom: none; 
    height: 50%; 
} 

#footer { 
    border: 0.5px solid dimgrey; 
    height: 26%; 
} 

あなたは、現時点ではそれだけのテンプレートだと、他の全てのページの上に表示されるdiv要素を見ることができますコンテンツは、影を持ち、ページの中央に配置されます。

私は、ユーザーがダイアログボックスのheader divをクリックしてドラッグすると、ダイアログボックス全体がページの周りを移動するという機能を実装したいと考えています。

私は以前に掲載いくつかの質問を見て撮影しています Using JS to move a div around the page Make Div Draggable using CSSこれらは純粋ジャバスクリプト、または私は角度とうまく噛み合うだろうわからない物事のはJQueryの方法を示唆しています。

コンポーネントをページの周りにドラッグできるようにするにはどうすればよいですか？

Answer 1

だから、他の回答には、JavaScript/jQueryのための優れたソリューションですが、私はありませんjQueryを使って、より多くの角度-Y/typescriptです-yの方法でこれを行うことができました。ここでは、次のとおりです。

//edit-global-names-dialog-box.component.html 

<div id="dialog-box-container"> 
    <div id="header" 
     (mousedown)="mousedown($event)" 
     (mousemove)="mousemove($event)" 
     (mouseup)="mouseup($event)" 
    > 
     <div id="title-div"> 
      <h5 id="title">Edit Global Name</h5> 
     </div> 
    </div> 
    <div id="content"> 
     <div id="label-area"> 

     </div> 
      <input type="text" id="text-box"> 
    </div> 
    <div id="footer"> 
     <div id="ok-button-div"> 
      <button type="button" id="ok-button">OK</button> 
     </div> 
     <div id="cancel-button-div"> 
      <button type="button" id="cancel-button">Cancel</button> 
     </div> 
    </div> 
</div> 

CSSはその重要ではありませんが、私はあなたがそれを見たい場合は、私はそれが私の答えにスペースを取ってほしくないHTMLとフィドルにそれをリンクされます：FIDDLE

はここ角度成分です：

//edit-global-names-dialog-box.component.ts 

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'edit-global-names-dialog-box', 
    templateUrl: './edit-global-names-dialog-box.component.html', 
    styleUrls: ['./edit-global-names-dialog-box.component.css'] 
}) 
export class EditGlobalNamesDialogBoxComponent implements OnInit{ 

    private mousePosition : PIXI.Point; 
    private dragOffset; 
    private isDown; 
    private dialogBoxDiv; 

    constructor() { 
     this.mousePosition = new PIXI.Point(); 
     this.isDown = false; 
     this.dragOffset = [0, 0]; 
    } 

    ngOnInit() { 
     this.dialogBoxDiv = document.getElementById('dialog-box-container'); 
    } 

    mousedown($event){ 
     this.isDown = true; 
     this.dragOffset = [ 
      this.dialogBoxDiv.offsetLeft - $event.clientX, 
      this.dialogBoxDiv.offsetTop - $event.clientY 
     ] 
    } 

    mouseup($event){ 
     this.isDown = false; 
    } 

    mousemove($event){ 
     $event.preventDefault(); 

     if (this.isDown){ 
      var mousePosition = { 
       x : $event.clientX, 
       y : $event.clientY 
      }; 

      this.dialogBoxDiv.style.left = (mousePosition.x + this.dragOffset[0]) + 'px'; 
      this.dialogBoxDiv.style.top = (mousePosition.y + this.dragOffset[1]) + 'px'; 
     } 
    } 
} 

それは少し神経質だが、それはほとんどがうまく動作します。誰かが改善できる点があれば教えてください。

Answer 2

ここで、Javascriptを使用したドラッグ可能なポップアップの約束の例があります。私はJQueryを使って少し簡単にしていますが、使用されるすべての関数は本質的に「通常の」Javascript関数のラッパーであるため、これを「通常の」javascriptに変換することはできます。気にならない。 :)

idを "myPopup"にしてdiv内にコンテンツを作成し、 "myPopup" idを任意の値に変更すると、jqueryを利用できると仮定してこれを貼り付けることができます。 Ofcにはそれを改善する方法がありますが、これはあなたを始めるはずです。

function displayPopup() { 
 
$("#myPopup").toggleClass("popupVisible"); 
 
} 
 

 
$(document).ready(function() { 
 

 
var isDragging = false; 
 
$("#myPopup") 
 
.mousedown(function() { 
 
    isDragging = false; 
 
$("#myPopup").addClass("clicked") 
 
}) 
 
.mousemove(function() { 
 
    isDragging = true; 
 
if($("#myPopup").hasClass("clicked")) { 
 
$("#myPopup").css("left", event.pageX - 20); 
 
$("#myPopup").css("top", event.pageY - 20); 
 
} 
 
}) 
 
.mouseup(function() { 
 
    var wasDragging = isDragging; 
 
    isDragging = false; 
 
    if (!wasDragging) { 
 

 
    } 
 
$("#myPopup").removeClass("clicked") 
 
}); 
 

 

 
});

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<style> 
 
#myPopup { 
 
position: absolute; 
 
width: 5cm; 
 
height: 5cm; 
 
background: #00ff00; 
 
top: calc(50% - 2.5cm); 
 
left: calc(50% - 2.5cm); 
 
display: none; 
 
} 
 
.popupVisible { 
 
display: block !important; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<a href="#" onclick="displayPopup()">Here's the popup!</a> 
 

 
<div id="myPopup"> 
 
</div> 
 

 
    </body> 
 
</html>