class DragResizeClose { constructor() { this.zIndex = 4; this.drag(); this.setDraggables(); this.setZindex(); this.handleCursor(); this.closeBtn(); } drag() { $('.draggable').draggable({ containment: "window" }); } setDraggables() { const w = window.innerWidth; const h = window.innerHeight; const randomCorrectedWidth = (sizeWindow, sizeBox) => { const corrected = sizeWindow - parseInt(sizeBox); return Math.floor(Math.random() * corrected) } const randomCorrectedHeight = (sizeWindow, sizeBox) => { const corrected = sizeWindow - parseInt(sizeBox); return getRndInteger(105, corrected-150) } const getRndInteger = (min, max) => Math.floor(Math.random() * (max - min + 1) ) + min; $( ".draggable" ).each(function() { const rw = getRndInteger(w/2-500, w/2) //setDimension $(this).css("width",rw); $(this).css("height", 'auto'); //setPosition if (this.id != 'program'){ const wBox = $(this).css('width'); const hBox = $(this).css('height'); const rX = randomCorrectedHeight(h, hBox); const rY = randomCorrectedWidth(w, wBox); $(this).css("top", rX); $(this).css("left", rY); } else { $(this).css("top", '20px'); $(this).css("right", '20px'); } }); } setZindex() { let thatZindex = this.zIndex; $('#dragZone div').mousedown(function() { // Setup z-index handler $(this).addClass('top').removeClass('bottom'); $(this).siblings().removeClass('top').addClass('bottom'); $(this).css("z-index", thatZindex++); }); } handleCursor() { $('.draggable') .on("mousedown", () => $('.draggable').css('cursor', 'grabbing')) .on("mouseup mouseleave", () => $('.draggable').css('cursor', 'grab')); } resize() { $(".resizable").resizable({ aspectRatio: true, maxHeight: 900, minHeight: 10 }); $(".resizableOriz").resizable({ aspectRatio: true, maxHeight: 500, minHeight: 10 }); } closeBtn() { $(".closable").click(function() { $(this).parent().fadeOut(); }) .hover( function() { $( this ).addClass( "hover" ); }, function() { $( this ).removeClass( "hover");} ); } }