bpeterso2000 · December 24, 2024 04:28
diff --git a/drag_drop_js.html b/drag_drop_js.html
 <!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 with JS</title>
    <style>
    body {
        margin: 2em;
        font-family: 'arial';
    }
    .container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        gap: 10px;
    }
    .box {
        font-size: 8px;
        display: flex;
        height: 50px;
        border: 3px solid #555;
        background-color: #eee;
        border-radius: .5em;
        cursor: move;
        justify-content: center;
        align-items: center;
    }
    .box.over {
        border: 3px dotted #555;
    }
    </style>
 </head>
 <body>
    <div class="container">
        <div id="box1" draggable="true" class="box">A</div>
        <div id="box2" draggable="true" class="box">B</div>
        <div id="box3" draggable="true" class="box">C</div>
 <script>
 document.addEventListener('DOMContentLoaded', (event) => {
    function handleDragStart(e) {
        this.style.opacity = '0.4';

        dragSrcEl = this;

        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', this.innerHTML);
    }

    function handleDragEnd(e) {
        this.style.opacity = '1';

        items.forEach(function (item) {
            item.classList.remove('over');
        })
    }

    function handleDragOver(e) {
        e.preventDefault();
        return false;
    }

    function handleDragEnter(e) {
        this.classList.add('over');
    }

    function handleDragLeave(e) {
        this.classList.remove('over');
    }

    function handleDrop(e) {
        e.stopPropagation(); // stops browser from redirecting

        if (dragSrcEl !== this) {
            dragSrcEl.innerHTML = this.innerHTML;
            this.innerHTML= e.dataTransfer.getData('text/html');
        }

        return false;
    }

    function handleDblClick(e) {
        let originalContent = this.innerHTML;
        let textarea = document.createElement('textarea');
        textarea.value = originalContent;
        textarea.style.width = '100px';
        textarea.style.height = '50px';
        textarea.style.border = '3px solid #555';
        textarea.style.borderRadius = '.5em';
        textarea.style.fontSize = '8px';
        this.innerHTML = '';
        this.appendChild(textarea);
        textarea.focus();
    }

    let items = document.querySelectorAll('.container .box');
    items.forEach(function (item) {
        item.addEventListener('dragstart', handleDragStart);
        item.addEventListener('dragend', handleDragEnd);
        item.addEventListener('dragover', handleDragOver);
        item.addEventListener('dragenter', handleDragEnter);
        item.addEventListener('dragleave', handleDragLeave);
        item.addEventListener('drop', handleDrop);
        item.addEventListener('dblclick', handleDblClick)
    });

 })
 </script>
 </body>
 </html>
	<!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 with JS</title>
	<style>
	body {
	margin: 2em;
	font-family: 'arial';
	}
	.container {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	gap: 10px;
	}
	.box {
	font-size: 8px;
	display: flex;
	height: 50px;
	border: 3px solid #555;
	background-color: #eee;
	border-radius: .5em;
	cursor: move;
	justify-content: center;
	align-items: center;
	}
	.box.over {
	border: 3px dotted #555;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div id="box1" draggable="true" class="box">A</div>
	<div id="box2" draggable="true" class="box">B</div>
	<div id="box3" draggable="true" class="box">C</div>
	<script>
	document.addEventListener('DOMContentLoaded', (event) => {
	function handleDragStart(e) {
	this.style.opacity = '0.4';

	dragSrcEl = this;

	e.dataTransfer.effectAllowed = 'move';
	e.dataTransfer.setData('text/html', this.innerHTML);
	}

	function handleDragEnd(e) {
	this.style.opacity = '1';

	items.forEach(function (item) {
	item.classList.remove('over');
	})
	}

	function handleDragOver(e) {
	e.preventDefault();
	return false;
	}

	function handleDragEnter(e) {
	this.classList.add('over');
	}

	function handleDragLeave(e) {
	this.classList.remove('over');
	}

	function handleDrop(e) {
	e.stopPropagation(); // stops browser from redirecting

	if (dragSrcEl !== this) {
	dragSrcEl.innerHTML = this.innerHTML;
	this.innerHTML= e.dataTransfer.getData('text/html');
	}

	return false;
	}

	function handleDblClick(e) {
	let originalContent = this.innerHTML;
	let textarea = document.createElement('textarea');
	textarea.value = originalContent;
	textarea.style.width = '100px';
	textarea.style.height = '50px';
	textarea.style.border = '3px solid #555';
	textarea.style.borderRadius = '.5em';
	textarea.style.fontSize = '8px';
	this.innerHTML = '';
	this.appendChild(textarea);
	textarea.focus();
	}

	let items = document.querySelectorAll('.container .box');
	items.forEach(function (item) {
	item.addEventListener('dragstart', handleDragStart);
	item.addEventListener('dragend', handleDragEnd);
	item.addEventListener('dragover', handleDragOver);
	item.addEventListener('dragenter', handleDragEnter);
	item.addEventListener('dragleave', handleDragLeave);
	item.addEventListener('drop', handleDrop);
	item.addEventListener('dblclick', handleDblClick)
	});

	})
	</script>
	</body>
	</html>