JSFiddle - React, Tailwind, and code Playground

by markdup

HTML

<body>
	<section id="leftbox">
		<ul>
			<li draggable="true" class="listitem"></li>
			<li draggable="true" class="listitem"></li>
			<li draggable="true" class="listitem"></li>
			<li draggable="true" class="listitem"></li>
		</ul>
	</section>
	<section id="rightbox">
		<div class="itemDropper"></div>
		<div class="itemDropper"></div>
	</section>
    <p style="float: left;">
        1. Zuerst wird mit mouse_is_inside definiert, dass die Maus nicht auf einem angeklickten li liegt.<br />
        2. Ein angeklicktes li erkennt man daran, dass es die Klasse 'active' bekommt.<br />
        3. Wird nun über eines dieser li.active gehovert, so wird die Variable mouse_is_inside auf true gestellt.<br />
        4. Geht die Maus runter, wird sie auf false gestellt.<br />
        <br />
        5. Bei einem Klick irgendwo, wenn mouse_is_inside false ist, sollten alle li.active auf li.listitem gestellt werden.<br />
        -- Das funktioniert jedoch nicht, es werden immer welche ausgelassen.<br />
        <br />
        Alles andere funktioniert perfekt. Es geht nur darum, dass wenn daneben geklickt wird, die li entmarkiert werden sollen.
    </p>
</body>

CSS

html, body {
	height: 100%;
	width: 100%;
    font-family: calibri, tahoma, sans-serif;
}

section {
	float: left;
	width: 600px;
	height: 240px;
	border: 2px solid limegreen;
}

ul {
list-style: none;
}

ul li {
	width: 400px;
	height: 15px;
	background: grey;
	border-radius: 3px;
	box-shadow: 0 0 5px rgba(0,0,0,.2);
	margin-bottom: 5px;
}

div.itemDropper {
	height: 200px;
	width: 200px;
	border: 2px solid grey;
    display: inline-block;
}

.listitem:hover {
	background: #666;
}

.listitem.active {
	background: #444;
}

JavaScript

function hasClass(element, cls) {
	return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function insertActive(elem) {
	items = '';
	item = document.getElementsByClassName('listitem');
	for (i = 0; i < item.length; i++) {
		(function(index){
			if (hasClass(item[i], 'active')) {
				items += (items !== '') ? ', '+index : index;
			}
		})(i);
	}
	activeItems = document.getElementsByClassName('listitem active');
	if (activeItems.length == 0) {
		items = theone;
	}
	elem.innerHTML = items;
	//
	//
	// AJAX-Call an Tabelle um Daten reinzuspeichern
	//
	//
}
var theone = '';
// -------------------------------------------------- 1. --------------------------------------------------
var mouse_is_inside = false;

// -------------------------------------------------- 5. --------------------------------------------------
document.onclick = function() {
	if (!mouse_is_inside) {
		activeItems = document.getElementsByClassName('listitem active');
		for (a = 0; a < activeItems.length; a++) {
			activeItems[a].className = 'listitem'; // komisches Verhalten, es bleibt immer eines oder es bleiben zwei markiert
            // die Schleife wird aber richtig oft ausgefuehrt, Beweis:
            console.log(a);
            // das wird so oft ausgefuehrt wie es li.active-Elemente gibt (activeItems.length)
		}
	}
};
function doFirst() {
	var dragIcon = document.createElement('img');
	dragIcon.src = 'logo.png';
	dragIcon.width = 100;
	dropper = document.getElementsByClassName('itemDropper');
	for (i = 0; i < dropper.length; i++) {
		dropper[i].addEventListener('dragenter', function(e) { e.preventDefault(); }, false);
		dropper[i].addEventListener('dragover', function(e) { e.preventDefault(); }, false);
		dropper[i].addEventListener('drop', function() { insertActive(this); }, false);
	}
	item = document.getElementsByClassName('listitem');
	for (i = 0; i < item.length; i++) {
		item[i].addEventListener('dragstart', function(e) { e.dataTransfer.setDragImage(dragIcon, -10,...