拖動來移動頁面周圍的組件？

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這些建議純JavaScript，或者做事情，我不知道會用角網以及jQuery的方式。

如何讓我的組件在頁面上拖動？

Answer 1

所以，對方的回答是Javascript/jQuery的一個偉大的解決方案，但我已經成功地做到這一點更角Y /打字稿-Y的方式，沒有JQuery的。那就是：

//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>