Room plan

by Kirill

HTML

<div id="room">
    <div id="bed"><span>Кровать</span></div>
    <div id="wardrobe"><span>Шкаф</span></div>
    <div id="table"><span>Стол</span></div>
    <div id="cover"><span>Коврик</span></div>
</div>
Таскать мышкой. Для вращения - клик по названию.

CSS

div {
    border: 1px solid black;
}
#room {
    width: 420px;
    height: 300px;
    position: relative;
}
#room div {
    position:absolute;
}
#bed {
    width: 140px;
    height: 210px;
    right: 0px;
    top: 0px;
}
#wardrobe {
    width: 50px;
    height: 150px;
}
#table {
    width: 120px;
    height: 60px;
    left: 120px;
    bottom: 0px;
}
#cover {
    width: 200px;
    height: 200px;
    left: 70px;
    top: 10px;
}

JavaScript

var obj = {
    pick: function(a,x,y) {
        if (a!="room") {
            this.el = a;
            this.el.x = x-obj.el.offsetLeft;
            this.el.y = y-obj.el.offsetTop;
        }
        else this.el = "";
    },
    unpick: function() {
         this.el = "";   
    },
    el : ""
};
function menu (el) {
    el.innerHTML+="<span>rotate</span>"
}
document.onmousedown = function() {
     obj.pick(event.target,event.clientX,event.clientY);   
}
document.onmousemove = function() {
    if(obj.el!=""){
        var x = event.clientX-obj.el.clientLeft;
        obj.el.style.left = (event.clientX-obj.el.x) + "px";
        obj.el.style.top = (event.clientY-obj.el.y) + "px";
    }
}
document.onmouseup = function() {
     obj.unpick();   
}
var room = document.getElementById("room");
for (var i=0;i<room.children.length;i++) {
    room.children[i].firstChild.onclick = function() {
         var w = this.parentNode.clientWidth;
        console.log(w)
         this.parentNode.style.width = this.parentNode.clientHeight + "px"
         console.log(w)
         this.parentNode.style.height = w + "px"
    }
}