本文介绍了拖动&放入HTML中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好，我正在写一个计算器来练习。目前还没有逻辑。我仍然希望允许用户在浏览器中拖动计算器。因此，我将Calculator元素嵌套在此标签中，并实现了一些Drag& Drop-logic（其中主要来自教程）。
有人看到我做错了吗？
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/html4/loose.dtd\">
< html>
< head>
< meta http-equiv =Content-Typecontent =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;
函数handleInput（currentInput）{
alert（currentInput）;
var x = 0;
x = currentInput;
函数saveOperator（currentOperator）{
alert（currentOperator）;
function dragInit（）{
document.onmousemove = drag;
document.onmouseup = dragStop;
}
函数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>
$ b< div id =calconmousedown =dragStart（this）style =position：absolute; top：10px; left：10px ;高度：270px;宽度：200像素;背景：＃006600\" >
< h1 id =headLine>< b> myCalculator< / b>< / h1>
< input type =textid =calcField/>
< table style =position：absolute; ID = calculatorTable >
< tr>
< td>< input id =7type =buttonvalue =7onclick =handleInput（this.value）/>< / td>
< td>< input id =8type =buttonvalue =8onclick =handleInput（this.value）/>< / td>
< td>< input id =9type =buttonvalue =9onclick =handleInput（this.value）/>< / td>
< td>< input id =/type =buttonvalue =/onclick =saveOperator（this.value）/>< / td>
< / tr>
< tr>
< td>< input id =4type =buttonvalue =4onclick =handleInput（this.value）/>< / td>
< td>< input id =5type =buttonvalue =5onclick =handleInput（this.value）/>< / td>
< td>< input id =6type =buttonvalue =6onclick =handleInput（this.value）/>< / td>
< td>< input id =*type =buttonvalue =*onclick =saveOperator（this.value）/>< / td>
< / tr>
< tr>
< td>< input id =1type =buttonvalue =4onclick =handleInput（this.value）/>< / td>
< td>< input id =2type =buttonvalue =5onclick =handleInput（this.value）/>< / td>
< td>< input id =3type =buttonvalue =6onclick =handleInput（this.value）/>< / td>
< td>< input id = - type =buttonvalue = - onclick =saveOperator（this.value）/>< / td>
< / tr>
< tr>
< td>< input id =0type =buttonvalue =0onclick =handleInput（this.value）/>< / td>
< td>< input id =，type =buttonvalue =，onclick =handleInput（this.value）/>< / td>
< td>< input id =+type =buttonvalue =+onclick =saveOperator（this.value）/>< / td>
< td>< input id ==type =buttonvalue ==onclick =saveOperator（this.value）/>< / td>
< / tr>
< / table>
< / div>
< / body>
< / html>
解决方案
第56行有语法错误。 code> null 而不是 nul 。您可能希望使用JS语法检查器，例如。
然后，第66行，你可能想要调用 dragInit 函数，所以你应该写< body onload =dragInit（） > 带圆括号（不是大括号，感谢轨道中的Lightness Races;）
Hi there I'm writing a little calculator for exercise. There is no logic yet. Still I wanted to allow the user to drag the calculator around the browser.
So I nested my Calculator elements in this -Tag and implemented some Drag&Drop-logic (which is mainly from a tutorial). Still it doesn't work.
Does anybody see what I do wrong?
<!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>
解决方案
You have a syntax error on line 56. Use null instead of nul. You probably want to use a JS syntax checker such as JSLint.
Then, line 66, you probably want to call dragInit function, so you should write <body onload="dragInit()"> with parentheses (not braces, thanks Lightness Races in Orbit ;)
这篇关于拖动&放入HTML中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！