basith374 · February 9, 2021 08:00
diff --git a/index.html b/index.html
 <doctype html>
 <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            body {
                margin: none;
            }
            .panel {
                border: 1px solid #ccc;
                border-radius: 4px;
                display: inline-block;
                vertical-align: top;
                width: 300px;
            }
            .panel-h {
                border-bottom: 1px solid #ccc;
            }
            .panel-b {
                height: 300px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div class="panel">
            <div class="panel-h">Car 1</div>
            <div class="panel-b" id="one">
                <button id="foo" draggable="true" ondragstart="drag(event)">Get location</button>
            </div>
        </div>
        <div class="panel">
            <div class="panel-h">Car 2</div>
            <div class="panel-b" id="two">

            </div>
        </div>
        <script>
            function generateUID() {
                var firstPart = (Math.random() * 46656) | 0;
                var secondPart = (Math.random() * 46656) | 0;
                firstPart = ("000" + firstPart.toString(36)).slice(-3);
                secondPart = ("000" + secondPart.toString(36)).slice(-3);
                return firstPart + secondPart;
            }
            function PubSub() {
                const subscribers = {}
                function publish(eventName, data) {
                    const listeners = subscribers[eventName];
                    if(listeners) Object.keys(listeners).forEach((key) => {
                        listeners[key](data);
                    })
                }
                function subscribe(eventName, callback) {
                    if (subscribers[eventName] === undefined) {
                        subscribers[eventName] = {}
                    }
                    const id = generateUID();
                    subscribers[eventName][id] = callback;
                    return () => {
                        delete subscribers[eventName][id];
                    }
                }
                return {
                    publish,
                    subscribe,
                }
            }
            const pubSub = new PubSub();
            function Panel(name, ref) {
                this.ref = ref;
                ref.ondragover = (e) => {
                    e.preventDefault()
                }
                ref.ondrop = (e) => {
                    e.preventDefault();
                    const id = e.dataTransfer.getData('source');
                    const el = document.getElementById(id);
                    if(el === e.target) return;
                    this.attach(el);
                }
                this.attach = (el) => {
                    el.onclick = function() {
                        pubSub.publish('SEND', ref);
                    }
                    el.ondragstart = (e) => {
                        e.dataTransfer.setData('source', e.target.id)
                    }
                    ref.appendChild(el);
                }
                pubSub.subscribe('SEND', (ref) => {
                    if(ref === this.ref) {
                        console.log('sending car', name, 'location');
                    }
                })
            }
            const map = {
                '1': new Panel('east', document.getElementById('one')),
                '2': new Panel('west', document.getElementById('two')),
            }
            map['1'].attach(document.getElementById('foo'))
        </script>
    </body>
 </html>
	<doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<style>
	body {
	margin: none;
	}
	.panel {
	border: 1px solid #ccc;
	border-radius: 4px;
	display: inline-block;
	vertical-align: top;
	width: 300px;
	}
	.panel-h {
	border-bottom: 1px solid #ccc;
	}
	.panel-b {
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	</style>
	</head>
	<body>
	<div class="panel">
	<div class="panel-h">Car 1</div>
	<div class="panel-b" id="one">
	<button id="foo" draggable="true" ondragstart="drag(event)">Get location</button>
	</div>
	</div>
	<div class="panel">
	<div class="panel-h">Car 2</div>
	<div class="panel-b" id="two">

	</div>
	</div>
	<script>
	function generateUID() {
	var firstPart = (Math.random() * 46656) \| 0;
	var secondPart = (Math.random() * 46656) \| 0;
	firstPart = ("000" + firstPart.toString(36)).slice(-3);
	secondPart = ("000" + secondPart.toString(36)).slice(-3);
	return firstPart + secondPart;
	}
	function PubSub() {
	const subscribers = {}
	function publish(eventName, data) {
	const listeners = subscribers[eventName];
	if(listeners) Object.keys(listeners).forEach((key) => {
	listeners[key](data);
	})
	}
	function subscribe(eventName, callback) {
	if (subscribers[eventName] === undefined) {
	subscribers[eventName] = {}
	}
	const id = generateUID();
	subscribers[eventName][id] = callback;
	return () => {
	delete subscribers[eventName][id];
	}
	}
	return {
	publish,
	subscribe,
	}
	}
	const pubSub = new PubSub();
	function Panel(name, ref) {
	this.ref = ref;
	ref.ondragover = (e) => {
	e.preventDefault()
	}
	ref.ondrop = (e) => {
	e.preventDefault();
	const id = e.dataTransfer.getData('source');
	const el = document.getElementById(id);
	if(el === e.target) return;
	this.attach(el);
	}
	this.attach = (el) => {
	el.onclick = function() {
	pubSub.publish('SEND', ref);
	}
	el.ondragstart = (e) => {
	e.dataTransfer.setData('source', e.target.id)
	}
	ref.appendChild(el);
	}
	pubSub.subscribe('SEND', (ref) => {
	if(ref === this.ref) {
	console.log('sending car', name, 'location');
	}
	})
	}
	const map = {
	'1': new Panel('east', document.getElementById('one')),
	'2': new Panel('west', document.getElementById('two')),
	}
	map['1'].attach(document.getElementById('foo'))
	</script>
	</body>
	</html>