Question

以下示例将显示一个页面，其中包含两个可拖动的正方形。 Nomatter我尝试了多么努力，我无法弄清楚为什么当我试图拖动一个方格时同时拖动这两个方块。

<html>
<head>
    <title>Hello!</title>
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
</head>
<body>

<h2>Hello</h2>

<div style="border: 1px solid red; height: 300px; position: relative;" id="canvas">

    <div style="background-color: yellow; width: 100px; height: 100px; position: relative;" class="square" />
    <div style="background-color: blue; width: 100px; height: 100px; position: relative; top: 200px; left: 200px;" class="square" />

</div>

<script type="text/javascript">
var mousePointsOn;
var holdX;
var holdY;
var track = function(e) {
    mousePointsOn.css('left', e.pageX - $("#canvas").offset().left - holdX);
    mousePointsOn.css('top', e.pageY - $("#canvas").offset().top - holdY);
};
$('#canvas').delegate('.square', 'mousedown', function(e) {
    holdX = e.pageX - $(this).offset().left;
    holdY = e.pageY - $(this).offset().top;
    e.preventDefault();
    mousePointsOn = $(this);
    $('body').bind('mousemove', track);
});
$('#canvas').delegate('.square', 'mouseup', function() {
    $('body').unbind('mousemove', track);
});
</script>

</body>
</html>

谢谢。

Answer 1

您无法使用<div />创建没有内容的div。浏览器实际上将第一个方块解释为未闭合的div，并嵌套第二个div，以及下面的脚本。请改用<div></div>。

Answer 2

你的HTML错了。 <div></div>需要正确关闭。同时<div>都有方形类，因此mousedown函数都绑定到它们。

为什么两个方块同时被拖动？

2 个答案: