Lose dependency in OO drag-drop

JavaScript
1

It’s been a while since I last wrote some code, but now that OO is maturing in js, I was experimenting a little, and have gotten in a messy thing where the DOM doesn’t give me any options but to create a dependency, does anyone know a way around this?

<!DOCTYPE HTML>
<html>
<head>
<style>
        div {
            width: 400px;
            height: 50px;
            padding: 0px;
            border: 1px solid #aaa;
        }
        .card{background:#ddd;}
        .cool{border:1px solid #f00;}
        </style>
        <script>
        class Dragger
        {
        	constructor(x)
        	{
        		x.setAttribute("draggable", true);
        		x.addEventListener("dragstart", this.drag);
        	}
        	
        	drag(ev)
        	{
        		ev.target.id="tempDrag"; //-- dependency
        	}
        }

        class Dropzone
        {
        	constructor(x)
        	{
        		x.addEventListener("drop", this.drop);
        		x.addEventListener("dragover", this.allowDrop);
        	}

        	allowDrop(ev)
        	{
        		ev.preventDefault();
        	}

        	drop(ev)
        	{
        		ev.target.appendChild(document.getElementById("tempDrag")); //-- dependency
        		document.getElementById("tempDrag").removeAttribute("id");
        		ev.preventDefault();
        	}
        }

        let _st = Symbol();

        class Binder
        {
            constructor(st) {
                if (_st !== st)
                    throw new Error('Instantiation not allowed!');
            }

            static get instance() {
                if(!this[_st])
                    this[_st] = new Binder(_st);
                return this[_st]
            }
        	
        	classToHtml(cssClass, esClass)
        	{
        		let items=document.getElementsByClassName(cssClass), i=0, c;
        		while(c=items[i++])
        			new esClass(c);
        	}
        }

        function init()
        {
        	Binder.instance.classToHtml("card", Dragger);
        	Binder.instance.classToHtml("dzone", Dropzone);
        }

        window.addEventListener("load", init);

        </script>
        </head>
        <body>
        <div class="dzone"></div>
        <div class="dzone"></div>
        <br>
        <div class="card" >test</div>
        </body>
        </html>
2

I know that it is possible to put stuff in the ev.dataTransfer, but that wouldn’t help either, what I would have hoped is something like an ev.dataTransfer.offspring, which would give back the node (ev.target in the Dragger class).
Seems like my problem is harder than I thought…

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.