需要實(shí)現(xiàn)的功能是點(diǎn)擊“添加”按鈕可以添加一個(gè)div（最多5個(gè)），點(diǎn)擊或拖拽div，同時(shí)在4個(gè)input中顯示該div的x、y坐標(biāo)和寬度、高度，并且在改變input的值時(shí)讓該div也作出相應(yīng)改變。
目前實(shí)現(xiàn)了前一個(gè)功能，但是修改input值改變div的功能未實(shí)現(xiàn)，請(qǐng)問(wèn)一下該如何做呢？不勝感激?。?！
代碼：
HTML：

<div class="layout-preview-in" id="layout-preview-in"></div>
<div align="center" id="layout-btn-div" style="display: none; margin: 0 0 10px 0">
    <button class="btn-add" type="button" onclick='addElement()'>添 加</button>
    <button class="btn-delete" type="button" onclick='dropElement()'>刪 除</button>
</div>
<div id="parameter-control" class="parameter-control" align="center">
    <span style="margin: 0 25px 0 0">模塊名: <input type="text" id="element-name" class="parameter-control-input" readonly></span>
    <span style="margin: 0 25px 0 0">x: <input type="text" id="input-x" class="parameter-control-input" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></span>
    <span style="margin: 0 25px 0 0">y: <input type="text" id="input-y" class="parameter-control-input" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></span>
    <span style="margin: 0 25px 0 0">寬度: <input type="text" id="input-width" class="parameter-control-input" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></span>
    <span style="margin: 0">高度: <input type="text" id="input-height" class="parameter-control-input" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></span>
</div>

js：

var numi = 1;
var numj = 1;
var len;

//添加函數(shù)
function addElement(){
    if(numi==6){
        alert("最多只能生成5個(gè)模塊！")
    }else{
        var div = document.createElement('div');
        //設(shè)置div樣式
        div.className = 'elemDiv';
        div.style.background = '#c9c9c9';
        div.style.width = '100px';
        div.style.height = '100px';
        div.style.border = 'solid 1px #fff';
        div.style.fontSize = '16px';
        div.style.zIndex = 100;
        div.style.cursor = 'move';
        div.innerHTML = numi;
        div.style.position = 'absolute';
        //定義div的id
        div.id = 'ele'+numi;
        div.menu = 'menu'+numi;
        //生成子div
        document.getElementById('layout-preview-in').appendChild(div);
        //添加功能
        $('#ele'+numi).resizable();
        $('#ele'+numi).draggable();

        //獲取layout-preview-in坐標(biāo)和大小用作越界判斷
        var bigX = document.getElementById('layout-preview-in').offsetLeft;
        var bigY = document.getElementById('layout-preview-in').offsetTop;
        var bigWidth = document.getElementById('layout-preview-in').offsetWidth;
        var bigHeight = document.getElementById('layout-preview-in').offsetHeight;

        //點(diǎn)擊div，該div變色
        var divs = document.getElementById("layout-preview-in").getElementsByTagName("div");
        len = divs.length;
        console.log(len);
        //alert(len);
        var currentDiv = null;
        for(var aai=0;aai<len;aai++){
            divs[aai].onmousedown = function(e){
                currentDiv = e.target;
                for(var aaj=0;aaj<len;aaj++){
                    divs[aaj].style.backgroundColor = "#c9c9c9";
                    divs[aaj].style.zIndex = 1;
                }
                this.style.backgroundColor = "#8db6cd";
                this.style.zIndex = 999;
                document.getElementById('element-name').value = this.id;
                document.getElementById("input-x").value = (this.offsetLeft - bigX) * 2;
                document.getElementById("input-y").value = (this.offsetTop - bigY) * 2;
                document.getElementById("input-width").value = this.offsetWidth * 2;
                document.getElementById("input-height").value = this.offsetHeight * 2;
                $('#input-x').keydown(function (ele) {
                    if (ele.keyCode == 13){
                        this.offsetLeft = $('#input-x').val()/2;
                        console.log($('#input-x').val());
                    }
                });
                this.onmousemove = function(e){
                    if(currentDiv && currentDiv == e.target) {
                        document.getElementById('element-name').value = this.id;
                        document.getElementById("input-x").value = (this.offsetLeft - bigX) * 2;
                        document.getElementById("input-y").value = (this.offsetTop - bigY) * 2;
                        document.getElementById("input-width").value = this.offsetWidth * 2;
                        document.getElementById("input-height").value = this.offsetHeight * 2;
                    }
                    if((this.offsetLeft < bigX) || (this.offsetTop < bigY) || ((this.offsetLeft + this.offsetWidth) > (bigX + bigWidth)) || ((this.offsetTop + this.offsetHeight) > (bigY + bigHeight))){
                        this.style.opacity = '0.4';
                    }else{
                        this.style.opacity = '1';
                    }
                };
            };
        }

        numi++;
        numj++;
    }
}

//刪除函數(shù)
function dropElement(){
    var dropDiv = document.getElementById('ele'+(numi-1));
    document.getElementById('layout-preview-in').removeChild(dropDiv);
    numi--;
    len = len - 4;

    var dropCheckBox = document.getElementById('cBox'+(numj-1));
    document.getElementById('partition-checkbox').removeChild(dropCheckBox);
    var dropIdText = document.getElementById('idtext'+(numj-1));
    document.getElementById('partition-checkbox').removeChild(dropIdText);
    numj--;
}