我正在尝试将图像从div拖到div,确保一次只有一个在div中。它适用于Opera,但在Chrome(和其他)中失败。它似乎有效,直到我从javascript更新元素,然后更新似乎没有在Chrome内部刷新。
我可以将其中一个图像拖到第三个方格,但随后一切都被冻结了。我喜欢解决这个问题的想法。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.outer {
width: 150px;
height: 40px;
}
.square {
float: left;
width: 32px;
height: 32px;
margin: 1px;
padding: 0px;
border: 1px solid #aaaaaa;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
lock();
}
function lock() {
var squares = document.getElementsByClassName("square");
for (var i = 0; i < squares.length; i++) {
if (squares[i].children.length == 0) {
squares[i].ondragover = 'allowDrop(event)';
}
else {
squares[i].ondragover = '';
}
}
}
function init() {
document.write("<div class='outer square' ondrop='drop(event)' ondragover='allowDrop(event)'><img src='bb.png' alt='bb' id=1 class='movable' draggable=true ondragstart='drag(event)'></div>");
lock();
}
</script>
</head>
<body>
<script type="text/javascript">
init();
</script>
<div class='outer square' ondrop='drop(event)' ondragover='allowDrop(event)'>
<img src="aa.png" alt='aa' id=2 class='movable' draggable=true ondragstart="drag(event)">
</div>
<div class='outer square' ondrop='drop(event)' ondragover='allowDrop(event)'>
</div>
</body>
</html>
答案 0 :(得分:0)
squares[i].ondragover = 'allowDrop(event)';
将null
分配给Chrome中的.ondragover
,因为它是字符串而不是函数。尝试将其替换为:
squares[i].ondragover = allowDrop; //<-- no quotes here