728x90
자바스크립트에서 버튼을 브라우저 밖으로 드래그 앤 드롭 동작이 보이면서 새창 띄우는 스크립트
728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop outside browser</title>
<style>
#draggable {
width: 100px;
height: 50px;
background-color: lightblue;
cursor: pointer;
position: relative;
}
</style>
</head>
<body>
<button id="draggable">Drag me!</button>
<script>
let draggable = document.getElementById('draggable');
let isDragging = false;
let offsetX, offsetY;
draggable.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - draggable.getBoundingClientRect().left;
offsetY = e.clientY - draggable.getBoundingClientRect().top;
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
});
function onMouseMove(e) {
draggable.style.left = (e.clientX - offsetX) + 'px';
draggable.style.top = (e.clientY - offsetY) + 'px';
// Check if the element is outside the viewport
if (e.clientY < 0 || e.clientY > window.innerHeight || e.clientX < 0 || e.clientX > window.innerWidth) {
openNewWindow();
onMouseUp(); // Clean up
}
}
function onMouseUp() {
isDragging = false;
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
}
function openNewWindow() {
window.open('https://www.example.com', '_blank');
}
</script>
</body>
</html>728x90
'푸닥거리' 카테고리의 다른 글
| 이클립스(Eclipse) IDE에서 검색 결과를 클릭할 때 무조건 새 탭에서 해당 위치 보기 (0) | 2023.08.30 |
|---|---|
| BS7799와 ISO 27000 간의 관계 (0) | 2023.08.19 |
| 인프라스트럭처 로직(infrastructure logic) 과 비즈니스 로직(business logic) (0) | 2023.08.12 |
| GitHub Copilot 기능 활용 with vscode (0) | 2023.03.31 |
| notion AI, chatGPT 로 정리한 codeGPT, Copilot 비교 (0) | 2023.03.31 |
댓글