在 HTML 中拖放答案

【问题标题】：Drag & drop in HTML在 HTML 中拖放
【发布时间】：2011-03-29 09:01:22
【问题描述】：

您好，我正在编写一个用于锻炼的小计算器。还没有逻辑。我仍然想让用户在浏览器中拖动计算器。

所以我在这个标签中嵌套了我的计算器元素并实现了一些拖放逻辑（主要来自教程）。还是不行。

有人看到我做错了吗？

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


                    <title>myCalculator</title>

                    <script type="text/javascript">

                    var dragObject = null;
                    var dragX = 0;
                    var dragY = 0;

                    var posX = 0;
                    var posY = 0;

                    function handleInput(currentInput){

                        alert(currentInput);

                        var x = 0;                              

                        x = currentInput;

                    }

                    function saveOperator(currentOperator){

                        alert(currentOperator);

                    }

                    function dragInit(){

                        document.onmousemove = drag;
                        document.onmouseup = dragStop;

                    }

                    function dragStop(){
                        dragObject = null;
                    }

                    function dragStart(element){
                        dragObject = element;
                        dragX = posX - dragObject.offsetLeft;
                        dragY = posY - dragObject.offsetTop;
                    }

                    function drag(event){

                        posX = document.all ? window.event.clientX : event.pageX;
                        posY = document.all ? window.event.clientY : event.pageY;

                        if(dragObject != nul){
                            dragObject.style.left = (posX - dragX) + "px";
                            dragObject.style.top = (posY - dragY) + "px";
                        }
                    }


                    </script>

    </head>
            <body onload="dragInit">




                     <div id="calc" onmousedown="dragStart(this)" style="position:absolute;top:10px;left:10px;height:270px;width:200px;background:#006600"> 


                     <h1 id="headLine"><b>myCalculator</b></h1>


                    <input type="text" id="calcField"/>


                    <table style="position: absolute;" id="calculatorTable">

                    <tr>
                        <td><input id="7" type="button" value="7" onclick="handleInput(this.value)"/></td>
                        <td><input id="8" type="button" value="8" onclick="handleInput(this.value)"/></td>
                        <td><input id="9" type="button" value="9" onclick="handleInput(this.value)"/></td>
                        <td><input id="/" type="button" value="/" onclick="saveOperator(this.value)"/></td>
                    </tr>
                    <tr>
                        <td><input id="4" type="button" value="4" onclick="handleInput(this.value)"/></td>
                        <td><input id="5" type="button" value="5" onclick="handleInput(this.value)"/></td>
                        <td><input id="6" type="button" value="6" onclick="handleInput(this.value)"/></td>
                        <td><input id="*" type="button" value="*" onclick="saveOperator(this.value)"/></td>
                    </tr>
                    <tr>
                        <td><input id="1" type="button" value="4" onclick="handleInput(this.value)"/></td>
                        <td><input id="2" type="button" value="5" onclick="handleInput(this.value)"/></td>
                        <td><input id="3" type="button" value="6" onclick="handleInput(this.value)"/></td>
                        <td><input id="-" type="button" value="-" onclick="saveOperator(this.value)"/></td>
                    </tr>
                    <tr>
                        <td><input id="0" type="button" value="0" onclick="handleInput(this.value)"/></td>
                        <td><input id="," type="button" value="," onclick="handleInput(this.value)"/></td>
                        <td><input id="+" type="button" value="+" onclick="saveOperator(this.value)"/></td>
                        <td><input id="=" type="button" value="=" onclick="saveOperator(this.value)"/></td>
                    </tr>

                    </table>
                    </div>


            </body>     
</html>

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

第 56 行出现语法错误。请使用 null 而不是 nul。您可能想要使用 JS 语法检查器，例如 JSLint。

然后，在第 66 行，您可能想要调用 dragInit 函数，所以您应该用括号写 <body onload="dragInit()">（不是大括号，感谢 Lightness Races in Orbit ；）

【讨论】：

这对您有很大帮助，非常感谢。我会评价你的遮阳篷，但我不能
呵呵没问题:)别忘了通过JSLint检查你的JS代码，这真的很有帮助。然后不要犹豫，浏览 Stackoverflow 以了解此类问题。最后阅读JavaScript Garden，你会学到很多很棒的技巧！
这些是括号，不是大括号。