拖动来移动页面周围的组件？

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>