Javascript对象移动和放置

Question

我正在学习如何编写javascript代码，请不要回答这可以通过使用其他人已经存在的代码来完成。我这样做是为了学习。

我有一种情况，即下面的CSS和HTML代码：

CSS：

    div.miniblock {
    font-size: 12px;
    background-color: #333333;
    text-align: center;
    vertical-align: middle;
    border: thin dotted #CCCCCC;
    color: #FFFFFF;
    padding: 2px;
        margin: 5px;
        cursor: move;
        position: relative;
}
div.miniblock_unsaved {
    font-size: 12px;
    background-color: #55AAAA;
    text-align: center;
    vertical-align: middle;
    border: thin dotted #000;
    color: #000;
    padding: 2px;
        margin: 5px;
        cursor: move;
        position: relative;
}
div.dropinto {
    font-size: 12px;
    background-color: #575757;
    text-align: center;
    vertical-align: middle;
    border: thin dotted #AAAAAA;
    color: #FFFFFF;
    padding: 2px;
        margin: 5px;
}
div.dropinto_over {
    font-size: 12px;
    background-color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    border: thin dotted #000000;
    color: #000000;
    padding: 2px;
        margin: 5px;
}
div.moving {
    font-size: 12px;
    background-color: #CCCCCC;
    text-align: center;
    vertical-align: middle;
    border: thin dotted #000000;
    color: #000000;
    z-index:1;
        height: 80px;
        width: 80px;
        opacity: 0.7;
    padding: 5px;        
        cursor: move;
}
div.OPAQUE {
    font-size: 12px;
    background-color: #FFF;
    text-align: center;
    vertical-align: middle;
    color: #000000;
        opacity: 0.5;    
}

HTML：

<INPUT TYPE="HIDDEN" NAME="block_side[3]" VALUE="" ID="block_side0">

        <INPUT TYPE="HIDDEN" NAME="block_order[3]" VALUE="" ID="block_order0">

        <INPUT TYPE="HIDDEN" NAME="block_side[4]" VALUE="" ID="block_side1">

        <INPUT TYPE="HIDDEN" NAME="block_order[4]" VALUE="" ID="block_order1">

        <INPUT TYPE="HIDDEN" NAME="block_side[5]" VALUE="" ID="block_side2">

        <INPUT TYPE="HIDDEN" NAME="block_order[5]" VALUE="" ID="block_order2">

        <INPUT TYPE="HIDDEN" NAME="block_side[6]" VALUE="" ID="block_side3">

        <INPUT TYPE="HIDDEN" NAME="block_order[6]" VALUE="" ID="block_order3">

        <INPUT TYPE="HIDDEN" NAME="block_side[2]" VALUE="L" ID="block_side=4">

        <INPUT TYPE="HIDDEN" NAME="block_order[2]" VALUE="1" ID="block_order4">

        <INPUT TYPE="HIDDEN" NAME="block_side[1]" VALUE="L" ID="block_side=5">

        <INPUT TYPE="HIDDEN" NAME="block_order[1]" VALUE="2" ID="block_order5">
<DIV CLASS="OPAQUE" ID="instruct"></DIV>Set your preferences for the blocks of information and their display location here.<TABLE height="100%" width="100%"><TR ><TH COLSPAN="2">Assigned Blocks</TH></TR><TR ><TD COLSPAN="2">Here are the blocks that are currently displayed during your experience.</TD></TR><TR ><TD WIDTH="50%" VALIGN="TOP"><DIV CLASS="dropinto" ID="leftblocks" SLOT="L">Left Blocks<div onmousedown="grabobj(4)" onmousemove="dragobj(4)" onmouseup="dropobj(4)" id="4" name="2" class="miniblock">Quick Links [2]</div><div onmousedown="grabobj(5)" onmousemove="dragobj(5)" onmouseup="dropobj(5)" id="5" name="1" class="miniblock">Session Information [1]</div></DIV></TD><TD WIDTH="50%" VALIGN="TOP"><DIV CLASS="dropinto" ID="rightblocks" SLOT="L">Right Blocks</DIV></TD></TR><TR ><TH COLSPAN="2">Unassigned Blocks</TH></TR><TR ><TD COLSPAN="2" ID="unassigned_blocks">Here are the blocks that are not currently displayed during your experience.<div onmousedown="grabobj(0)" onmousemove="dragobj(0)" onmouseup="dropobj(0)" id="0" name="3" class="miniblock">Another Block [3]</div><div onmousedown="grabobj(1)" onmousemove="dragobj(1)" onmouseup="dropobj(1)" id="1" name="4" class="miniblock">And Another [4]</div><div onmousedown="grabobj(2)" onmousemove="dragobj(2)" onmouseup="dropobj(2)" id="2" name="5" class="miniblock">Poll Voting [5]</div><div onmousedown="grabobj(3)" onmousemove="dragobj(3)" onmouseup="dropobj(3)" id="3" name="6" class="miniblock">SysAdmin Block [6]</div></TD></TR></TABLE>

和以下Javascript：

        window.instruct = function(id, instr){
    var el = document.getElementById(id);
    el.innerHTML = instr;
}

window.blockprefs = function(id, thisblock){
    // determine which slot thisblock belongs to
    s = id.getAttribute('SLOT');
    // identify all the child nodes associated to this slot
    c = id.childNodes;

        for(var i=1;i < c.length; i++) { // I set i = 1 here because I don't care about the parent element at this time.
        name = c[i].getAttribute('NAME');
//        console.log(c.length,c[i]);
        pos = document.getElementById('block_side'+name);
        ord = document.getElementById('block_order'+name);
        pos.setAttribute('VALUE',s);
        ord.setAttribute('VALUE',i);
        console.log(name,pos,ord,c[i]);
    }

};

window.grabobj = function(id){
//    console.log('moving object: '+id);
//    console.log(document.getElementById(id));
//    console.log(event.clientX+', '+event.clientY);
    thisblock = document.getElementById(id);
    thisblock.setAttribute('CLASS','moving');
    thisblock.setAttribute('STATUS','click');    
    thisblock.style.position = 'absolute';
    thisblock.style.left = event.pageX - 40; 
    thisblock.style.top = event.pageY - 20;
    //    id.addEventListener('mousemove',function(){console.log('moving mouse: x('+event.clientX)+') y('+event.clientY+')';},false);
};

window.drop = function(id, hit) {
id.setAttribute('STATUS','drop');                
id.setAttribute('CLASS','miniblock_unsaved');
id.setAttribute('STYLE','');
instruct('instruct','You have unsaved changes, be sure to commit your changes below.');
};

window.dropobj = function(id){
    thisblock = document.getElementById(id);
        if(thisblock.getAttribute('STATUS') == 'drag' || thisblock.getAttribute('STATUS') == 'click'){
            // determine if the block was dropped within one of the drop object targets
            // if it was not, return it to the original location, otherwise, drop it into the new location
            var left = document.getElementById("leftblocks"),
            right = document.getElementById('rightblocks'),
            leftbounds = left.getBoundingClientRect(),
            rightbounds = right.getBoundingClientRect(),
            t  = window.pageYOffset || document.documentElement.scrollTop,
            l = window.pageXOffset || document.documentElement.scrollLeft;

            if(event.clientX >= leftbounds.left &&  event.clientX <= leftbounds.right &&  event.clientY >= leftbounds.top &&  event.clientY <= leftbounds.bottom){
                // hit on the left blocks bounds, drop it into the left block
                left.appendChild(thisblock);
                //thisblock.insertBefore(left.firstchild);
                drop(thisblock);
                // now assign the hidden form element the correct values based on the current config in the left block then
                // here is what I think will have to happen:
                //  identify all child nodes of the parent node
                // identify all of the hidden form fields associated to those child nodes
                // update all of the hidden form fields associated to those child nodes with
                // the correct order and L / R flag.
                // not sure how to complete those tasks at this time.
//                console.log( document.getElementById('block_order' + thisblock.getAttribute('ID')));
//                console.log( left.childElementCount );
                blockprefs(left, thisblock);
        } else if(event.clientX >= rightbounds.left &&  event.clientX <= rightbounds.right &&  event.clientY >= rightbounds.top &&  event.clientY <= rightbounds.bottom){
                // hit on the right blocks bounds, drop it into the right block
                right.appendChild(thisblock);
                //thisblock.insertBefore(right.firstchild);
                drop(thisblock);
                // now assign the hidden form element the correct values based on the current config in the left block then
            } else {
                // user missed dropping into the left or right box, drop it back into unassigned.
                var u = document.getElementById("unassigned_blocks");
                u.appendChild(thisblock);
                drop(thisblock);
            }
    }
    };

window.dragobj = function(id){
    thisblock = document.getElementById(id);
if(thisblock.getAttribute('STATUS') == 'click' || thisblock.getAttribute('STATUS') == 'drag'){
    thisblock.style.left = event.pageX - 40; 
    thisblock.style.top = event.pageY - 20;
    thisblock.setAttribute('STATUS','drag');
    }
};



window.onload = function() {
// on mouseover change color of leftdiv or right div
var left = document.getElementById("leftblocks");
var right = document.getElementById('rightblocks');

console.log(left.nodeValue);


function block_over(block){ // set the attribute of the block on mouse over
//    console.log('setting property of block: '+block);
    block.setAttribute('CLASS','dropinto_over');
}
function block_out(block){ // set the attribute of the block on mouse out
    block.setAttribute('CLASS','dropinto');
}
left.addEventListener('mouseover',function(){block_over(left); },true); // listener to set the left block's attributes
left.addEventListener('mouseout',function(){block_out(left); },true);

right.addEventListener('mouseover',function(){block_over(right); },true); // listener to set the right block's attributes
right.addEventListener('mouseout',function(){block_out(right); },true);
};

我试图把它放到一个JSFIDDLE https://jsfiddle.net/vt1hcLL6/中但框架却把它扔掉了所以它可能只是进入一个平面的html文件抱歉。

作为用户，此代码的目的是能够拾取块并将它们移动到插槽（左侧或右侧）块中，或者从这些块中移除它们。 执行此操作后，javascript将在隐藏的表单字段中设置一些值，以便在保存页面时，php将获取这些值。 目前，如果你将一个块移动到左侧是唯一的设置，是的，一旦我从硬编码的角度看到这一切，我将进一步抽象它，现在其中一些是硬编码的。

我的问题是，在第一个将一个块放入左侧块的情况下，一切正常，所有HIDDEN表单字段都正确地更新了SLOT =“L”属性和ORDER =“i”属性（我是与子迭代相对应的数字。

大！有用！现在......一旦第二个块从下面添加到该集合中，代码就会中断，我无法弄清楚原因。

执行此功能的代码位于blockprefs（）函数中，其中我遍历Left块的所有子节点并尝试引入属于每个子节点的隐藏表单元素。我得到一个： divblock.js：33未捕获的TypeError：无法读取null的属性'setAttribute'