Как сделать так что бы при выходе за белую область выводилось сообщение

Question

Я бы хотел узнать как сделать так что-бы при выходе за область выводилось сообщение о том что вы пересекли ее.

let dragMode = false;
            circle.addEventListener('mousedown', function (e) {
                dragMode = true;
            });
            circle.addEventListener('mouseup', function (e) {
                dragMode = false;
            });
    
    
    
    
            document.addEventListener('mousemove', function (e) {
                if (dragMode) {
                  circle.style.left = e.clientX - 50 + 'px';
                  circle.style.top = e.clientY - 50 + 'px';
                }
            });

body{
    background-color: #333;
}

.container{
    max-width: 1440px;
    max-height: 900px;
    margin: 0 auto;
}


.circle {
    position: absolute;
    top: 20px;
    left: 60px;
    z-index: 1;
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

<div class="container">
    <svg>
        <rect fill="white" width="1440px" height="900px" onclick="click(event)"></rect>
    
    <div class="circle" id="circle">
          </svg>
    </div>
<div>

Answer 1

Я для выхода за пределы правой и нижней границ описал условия. Для остальных по аналогии. Про координаты элементов вот тут неплохо рассказано. А вообще прикольный код. Я бы DragnDrop кинулся применять. :)

let dragMode = false;
let r = document.getElementById('f');
            circle.addEventListener('mousedown', function (e) {
                dragMode = true;
            });
            circle.addEventListener('mouseup', function (e) {
                dragMode = false;
            });
    
    
    
    
            document.addEventListener('mousemove', function (e) {
                if (dragMode) {
                  circle.style.left = e.clientX - 50 + 'px';
                  circle.style.top = e.clientY - 50 + 'px';
                  
                  // вот тут условия
                  if(circle.getBoundingClientRect().x + 100 > r.getBoundingClientRect().x + r.getBoundingClientRect().width || circle.getBoundingClientRect().y + 100 > r.getBoundingClientRect().x + r.getBoundingClientRect().height) {
                    console.log('OUT!');
                  }
                }
            });

body{
    background-color: #333;
}

.container{
    max-width: 1440px;
    max-height: 900px;
    margin: 0 auto;
}


.circle {
    position: absolute;
    top: 20px;
    left: 60px;
    z-index: 1;
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

<div class="container">
    <svg id="f">
        <rect fill="white" width="1440px" height="900px" onclick="click(event)"></rect>
    
    <div class="circle" id="circle">
          </svg>
    </div>
<div>

БЛОГ НА HUSL

Как сделать так что бы при выходе за белую область выводилось сообщение

Ответы (1 шт):