-1

我是 Javascript 的初学者，所以专家很容易解决这个问题。我正在研究这个：http ://www.3dsbuzz.com/receng/test.php源代码如下。

这个想法是，将图像拖到白框中会向文本框添加一个值，然后触发 mysql 查询并显示一些数据。但是我有两个问题：

1）将图片拖入白框时，不显示图片的value属性，只显示“未定义”。

2）当我硬编码一个值而不是使用变量（在第 17 行）时，它会很好地进入文本框，但不会触发 mysql 查询，尽管如果您直接在框中键入它会触发。

<html>
<head>
<style type="text/css">
#div1 {width:175px;height:97px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}
function allowDrop(ev){
    ev.preventDefault();
}
function drop(ev){
    ev.preventDefault();
    ev.target.appendChild(document.getElementById(ev.dataTransfer.getData("Text")));
    var newtext = document.dragme.value;
    document.myform.users.value += newtext;
}
function showUser(str){
if (str==""){
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="users" onchange="showUser(this.value)">
</form>
<div id="txtHint"><b>Type "49" or "50" in the box above</b></div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="49" name="dragme" value="49" src="http://www.3dsbuzz.com/wp-content/uploads/2012/06/mutantmuddsthumb.jpg" draggable="true" ondragstart="drag(event)" />
<img id="50" name="dragme" value="50" src="http://www.3dsbuzz.com/wp-content/uploads/2011/09/layton-thumb.jpg" draggable="true" ondragstart="drag(event)" />
</body>
</html>
4

2 回答 2

0

不应该

var newtext = document.draging.value;

是

var newtext = document.dragimg.value;

因为没有定义拖动。

于 2012-08-26T16:43:11.797 回答
0

1）图像没有内在value属性。要么您必须使用getAttribute该值，要么由于 id 和 value 相同，因此只需获取已删除图像的 id：

function drop(ev){
    ev.preventDefault();
    ev.target.appendChild(document.getElementById(ev.dataTransfer.getData("Text")));
    var newtext = ev.dataTransfer.getData("Text");
    document.myform.users.value += newtext;
}

2) 只有在用户更改值时才会调用更改处理程序，而不是在脚本更改值时调用。您必须手动触发它：

showUser(newtext);
于 2012-08-26T16:49:06.397 回答