拖拽移动
通过定义dom节点的onmousedown函数，可以实现对拖拽事件的处理：
创建div：
const popup = document.createElement('div');
popup.style.position = 'absolute';
popup.style.top = '50px';
popup.style.left = '50px';
popup.style.zIndex = 1;
popup.style.cursor = "move";
popup.style.width = '1300px';
popup.style.paddingTop = '30px';
popup.style.height = '420px';
popup.style.backgroundColor = 'white';
popup.style.boxSizing = 'border-box';
popup.style.borderRadius = '5px';
popup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';
添加事件处理：
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
dragElement(popup);
拖拽修改宽高
创建一个按钮，添加该按钮的onmousedown函数，可以实现对拖拽事件的处理：
const resizeButton = document.createElement('button');
resizeButton.innerHTML = '↘';
resizeButton.style.position = 'absolute';
resizeButton.style.right = '0';
resizeButton.style.bottom = '0';
resizeButton.style.width = '20px';
resizeButton.style.height = '20px';
resizeButton.style.backgroundColor = 'white';
resizeButton.style.color = 'black';
resizeButton.style.fontSize = '16px';
resizeButton.style.border = '1px solid black';
// resizeButton.style.borderRadius = '50%';
resizeButton.style.boxShadow = '1px 1px 5px rgba(0, 0, 0, 0.2)';
resizeButton.style.cursor = 'nwse-resize';
popup.appendChild(resizeButton);
添加onmousedown的事件处理：
function resizeElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
resizeButton.onmousedown = resizeMouseDown;
function resizeMouseDown(e) {
e = e || window.event;
e.preventDefault();
e.stopPropagation();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeResizeElement;
document.onmousemove = elementResize;
}
function elementResize(e) {
e = e || window.event;
e.preventDefault();
pos1 = e.clientX - pos3;
pos2 = e.clientY - pos4;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.width = (elmnt.offsetWidth + pos1) + "px";
elmnt.style.height = (elmnt.offsetHeight + pos2) + "px";
}
function closeResizeElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
resizeElement(popup);
完整代码
以下是一个使用js实现的关于弹出框实现拖拽移动和修改宽高的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
const popupContainer = document.createElement('div');
popupContainer.style.display = 'none';
popupContainer.style.position = 'fixed';
popupContainer.style.left = '0';
popupContainer.style.top = '0';
popupContainer.style.width = '100%';
popupContainer.style.height = '100%';
popupContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
popupContainer.style.zIndex = '1000';
const popup = document.createElement('div');
popup.style.position = 'absolute';
popup.style.top = '50px';
popup.style.left = '50px';
popup.style.zIndex = 1;
popup.style.cursor = "move";
popup.style.width = '1300px';
popup.style.paddingTop = '30px';
popup.style.height = '420px';
popup.style.backgroundColor = 'white';
popup.style.boxSizing = 'border-box';
popup.style.borderRadius = '5px';
popup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';
const iframe = document.createElement('iframe');
iframe.src = '';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = '0';
const closeButton = document.createElement('button');
closeButton.innerHTML = 'X';
closeButton.style.position = 'absolute';
closeButton.style.right = '10px';
closeButton.style.top = '5px';
closeButton.style.zIndex = '10';
closeButton.addEventListener('click', function () {
document.body.removeChild(popupContainer);
});
popup.appendChild(closeButton);
const resizeButton = document.createElement('button');
resizeButton.innerHTML = '↘';
resizeButton.style.position = 'absolute';
resizeButton.style.right = '0';
resizeButton.style.bottom = '0';
resizeButton.style.width = '20px';
resizeButton.style.height = '20px';
resizeButton.style.backgroundColor = 'white';
resizeButton.style.color = 'black';
resizeButton.style.fontSize = '16px';
resizeButton.style.border = '1px solid black';
// resizeButton.style.borderRadius = '50%';
resizeButton.style.boxShadow = '1px 1px 5px rgba(0, 0, 0, 0.2)';
resizeButton.style.cursor = 'nwse-resize';
popup.appendChild(resizeButton);
popup.appendChild(iframe);
popupContainer.appendChild(popup);
document.body.appendChild(popupContainer);
popupContainer.style.display = 'block';
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
dragElement(popup);
function resizeElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
resizeButton.onmousedown = resizeMouseDown;
function resizeMouseDown(e) {
e = e || window.event;
e.preventDefault();
e.stopPropagation();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeResizeElement;
document.onmousemove = elementResize;
}
function elementResize(e) {
e = e || window.event;
e.preventDefault();
pos1 = e.clientX - pos3;
pos2 = e.clientY - pos4;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.width = (elmnt.offsetWidth + pos1) + "px";
elmnt.style.height = (elmnt.offsetHeight + pos2) + "px";
}
function closeResizeElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
resizeElement(popup);
</script>
</html>
直接复制代码，新建一个html文件即可运行查看。