拖动以在页面周围移动组件？

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 做事的方式，我不确定这些方式是否与 angular.

相吻合

如何让我的组件在页面上四处拖动？

Answer 1

好的，这是承诺的使用 Javascript 的可拖动弹出窗口示例。请注意，我还为此使用了 JQuery 以使其更容易一些，但所有使用的函数本质上只是 "regular" Javascript 函数的包装器，因此可以很容易地转换到 "regular" javascript，我只是懒得理会。 :)

如果您在 div 中使用 ID "myPopup" 创建您的内容，只需将 "myPopup" ID 更改为您想要的任何内容，假设您有 [=31]，您几乎可以复制粘贴此内容=]可用。 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>

Answer 2

所以另一个答案是 javascript/Jquery 的一个很好的解决方案，但我设法以更 angular-y/typescript-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 没那么重要，但我会 link 放在 fiddle 和 HTML 中，如果你想看的话，我不会希望它在我的回答中占据 space：FIDDLE

这是 angular 组件：

//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';
        }
    }
}

有点紧张，但效果很好。如果有人有任何可以改进的地方，请告诉我。

拖动以在页面周围移动组件？

Drag to move a component around the page?

drag

typescript

angular