You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
$(document).ready(function(){
|
|
// DRAG and Z-INDEX priorities handler
|
|
var a = 3;
|
|
$( '.draggable' ).draggable({ containment: "window" },{ // Setup dragging and containment
|
|
start: function(event, ui) { $(this).css("z-index", a++); } // Initialize z-index for handelr
|
|
});
|
|
|
|
$('#dragZone div').click(function() { // Setup z-index handler
|
|
$(this).addClass('top').removeClass('bottom');
|
|
$(this).siblings().removeClass('top').addClass('bottom');
|
|
$(this).css("z-index", a++);
|
|
});
|
|
|
|
// CURSOR MOUSE DOWN
|
|
$('.draggable').on("mousedown", function(){
|
|
$('.draggable').css('cursor', 'grabbing');
|
|
}).on("mouseup mouseleave", function(){
|
|
$('.draggable').css('cursor', 'grab');
|
|
});
|
|
|
|
// RESIZE with aspect ratio
|
|
$( ".resizable" ).resizable({ aspectRatio:true, maxHeight:900, minHeight:200 });
|
|
$( ".resizableOriz" ).resizable({ aspectRatio:true, maxHeight:500, minHeight:200 });
|
|
|
|
|
|
|
|
// size random of draggables
|
|
$( ".draggable" ).each(function() {
|
|
|
|
|
|
let rw = Math.floor(Math.random() * 500) + 300;
|
|
let rh = Math.floor(Math.random() * 400) + 200;
|
|
|
|
console.log(rw,rh)
|
|
|
|
$( this ).css("width",rw);
|
|
$( this ).css("height",rh)
|
|
|
|
$( this ).append("<button>X</button>")
|
|
});
|
|
|
|
// close window
|
|
$(".closable").click(function() {
|
|
$( this ).fadeOut();
|
|
});
|
|
|
|
// open window
|
|
$( ".draggable" ).each(function() {
|
|
let idid = $( this ).attr('id')
|
|
console.log(idid)
|
|
$("#icons").append(`<button onclick="$(${idid}).fadeIn()" class="icon"></button>`)
|
|
});
|
|
// TODOS
|
|
// Open window icon (on background 'desktop')
|
|
// Close window button (on 'window' itself)
|
|
});
|