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使其更容易，但所使用的所有函数基本上只是＆＃34;常规＆＃34;的包装。 Javascript函数，因此可以很容易地转换为＆＃34;常规＆＃34; javascript，我不能被打扰。：）

如果您使用ID＆＃34; myPopup＆＃34;在div中创建内容并且只是改变＆＃34; myPopup＆＃34;假设你有jquery可用，你可以在任何你想要的内容中复制粘贴。 Ofc有办法改进它，但这应该让你开始。

＆＃13;

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")
});


});

＆＃13;

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

＆＃13;

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并不重要，但是如果你想看到它，我会把它与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';
        }
    }
}

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

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

2 个答案: