evdokimovm · January 26, 2024 02:44
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #draggableElement {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: #fff;
            text-align: center;
            line-height: 100px;
            position: absolute;
            cursor: grab;
            z-index: 1;
        }

        .targetElement {
            width: 200px;
            height: 200px;
            background-color: #2ecc71;
            position: absolute;
        }

        #targetElement1 {
            top: 150px;
            left: 150px;
        }

        #targetElement2 {
            top: 150px;
            left: 400px;
        }

        #targetElement3 {
            top: 400px;
            left: 150px;
        }
    </style>
    <title>Draggable Element</title>
 </head>

 <body>
    <div id="draggableElement">Drag me!</div>

    <div class="targetElement" id="targetElement1">Target Area 1</div>
    <div class="targetElement" id="targetElement2">Target Area 2</div>
    <div class="targetElement" id="targetElement3">Target Area 3</div>

    <script>
        var draggableElement = document.getElementById('draggableElement')
        var targetElements = document.getElementsByClassName('targetElement')

        var offsetX, offsetY
        var isDragging = false

        draggableElement.addEventListener('mousedown', function (e) {
            isDragging = true
            offsetX = e.clientX - draggableElement.getBoundingClientRect().left
            offsetY = e.clientY - draggableElement.getBoundingClientRect().top

            draggableElement.style.cursor = 'grabbing'
            draggableElement.style.transition = 'none'
        })

        document.addEventListener('mousemove', e => {
            if (!isDragging) return

            var x = e.clientX - offsetX
            var y = e.clientY - offsetY

            draggableElement.style.left = `${x}px`
            draggableElement.style.top = `${y}px`

            var closestTarget
            var minDistance = Infinity

            for (var i = 0; i < targetElements.length; i++) {
                var targetRect = targetElements[i].getBoundingClientRect()
                var targetCenterX = targetRect.left + targetRect.width / 2
                var targetCenterY = targetRect.top + targetRect.height / 2
                var distance = Math.hypot(
                                    targetCenterX - (x + draggableElement.offsetWidth / 2),
                                    targetCenterY - (y + draggableElement.offsetHeight / 2)
                                )

                if (distance < minDistance) {
                    minDistance = distance
                    closestTarget = targetElements[i]
                }

                targetElements[i].style.backgroundColor = '#2ecc71'
            }

            var targetRect = closestTarget.getBoundingClientRect()
            var isInsideHorizontally = x + draggableElement.offsetWidth > targetRect.left && x < targetRect.right
            var isInsideVertically = y + draggableElement.offsetHeight > targetRect.top && y < targetRect.bottom

            if (isInsideHorizontally && isInsideVertically) {
                closestTarget.style.backgroundColor = '#e74c3c'
                console.log("Draggable element is inside the target element")
                console.log("Target element info:", closestTarget.id)
            }
        })

        document.addEventListener('mouseup', function () {
            if (isDragging) {
                isDragging = false
                draggableElement.style.cursor = 'grab'
                draggableElement.style.transition = 'all 0.3s'
            }
        })
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
	margin: 0;
	padding: 0;
	}

	#draggableElement {
	width: 100px;
	height: 100px;
	background-color: #3498db;
	color: #fff;
	text-align: center;
	line-height: 100px;
	position: absolute;
	cursor: grab;
	z-index: 1;
	}

	.targetElement {
	width: 200px;
	height: 200px;
	background-color: #2ecc71;
	position: absolute;
	}

	#targetElement1 {
	top: 150px;
	left: 150px;
	}

	#targetElement2 {
	top: 150px;
	left: 400px;
	}

	#targetElement3 {
	top: 400px;
	left: 150px;
	}
	</style>
	<title>Draggable Element</title>
	</head>

	<body>
	<div id="draggableElement">Drag me!</div>

	<div class="targetElement" id="targetElement1">Target Area 1</div>
	<div class="targetElement" id="targetElement2">Target Area 2</div>
	<div class="targetElement" id="targetElement3">Target Area 3</div>

	<script>
	var draggableElement = document.getElementById('draggableElement')
	var targetElements = document.getElementsByClassName('targetElement')

	var offsetX, offsetY
	var isDragging = false

	draggableElement.addEventListener('mousedown', function (e) {
	isDragging = true
	offsetX = e.clientX - draggableElement.getBoundingClientRect().left
	offsetY = e.clientY - draggableElement.getBoundingClientRect().top

	draggableElement.style.cursor = 'grabbing'
	draggableElement.style.transition = 'none'
	})

	document.addEventListener('mousemove', e => {
	if (!isDragging) return

	var x = e.clientX - offsetX
	var y = e.clientY - offsetY

	draggableElement.style.left = `${x}px`
	draggableElement.style.top = `${y}px`

	var closestTarget
	var minDistance = Infinity

	for (var i = 0; i < targetElements.length; i++) {
	var targetRect = targetElements[i].getBoundingClientRect()
	var targetCenterX = targetRect.left + targetRect.width / 2
	var targetCenterY = targetRect.top + targetRect.height / 2
	var distance = Math.hypot(
	targetCenterX - (x + draggableElement.offsetWidth / 2),
	targetCenterY - (y + draggableElement.offsetHeight / 2)
	)

	if (distance < minDistance) {
	minDistance = distance
	closestTarget = targetElements[i]
	}

	targetElements[i].style.backgroundColor = '#2ecc71'
	}

	var targetRect = closestTarget.getBoundingClientRect()
	var isInsideHorizontally = x + draggableElement.offsetWidth > targetRect.left && x < targetRect.right
	var isInsideVertically = y + draggableElement.offsetHeight > targetRect.top && y < targetRect.bottom

	if (isInsideHorizontally && isInsideVertically) {
	closestTarget.style.backgroundColor = '#e74c3c'
	console.log("Draggable element is inside the target element")
	console.log("Target element info:", closestTarget.id)
	}
	})

	document.addEventListener('mouseup', function () {
	if (isDragging) {
	isDragging = false
	draggableElement.style.cursor = 'grab'
	draggableElement.style.transition = 'all 0.3s'
	}
	})
	</script>
	</body>
	</html>