JSFiddle - React, Tailwind, and code Playground

by Marco Iamonte

HTML

<div id="container">
    <div id="spawner">
        <button id="icanspawn">Click me like there is no tomorrow.</button>
    </div>
</div>

CSS

#spawner {
    width: 300px;
    height: 250px;
    background: blue;
    position: absolute;
}

JavaScript

var divElements = new Array();
var currPos = { x: -1, y: -1 }; 
    $(document).on('mousemove', function (mouseMoveEvent) {
        currPos.x = mouseMoveEvent.pageX;
        currPos.y = mouseMoveEvent.pageY;
    });
    
    $('#icanspawn').on('click',function(e){
        draggableObject = new draggableDivObject('draggableDiv'+(divElements.length),'some content here.. maybe even HTML, why not?',{'width': '500px','height':'500px','background':'red'});
        divElements[divElements.length] = draggableObject;
    });


var draggableDivObject = function (id, content, styles) {
  this.id = id;
  this.content = content;
  this.styles = styles;
    $('#container').append('<div id="'+this.id+'">'+this.content+'</div>');
    for (var style in styles) {
        $('#'+this.id).css(style, styles[style]);
    }
    $('#'+this.id).draggable();
    $('#'+this.id).offset({left: currPos.x, top: currPos.y});
};

draggableDivObject.prototype.listen = function (eventType, callback) {
  $('#'+this.id).on(eventType, callback);
};