javascript - 如何为多个div赋予特定目标位置动画？

我在使函数使用jQuery动画设置某些div的位置时遇到一些问题。我使用jQuery进行了测验，并希望带有数字ID的正确的“已回答”可拖动div自动转到具有相同ID的目标位置div。这是用于导航（每次仅显示12个问题）。

HTML看起来像这样

<div id="container"> //floats left
    <div class="answer" id="1"></div> //droppables
    <div class="answer" id="2"></div>
    <div class="answer" id="3"></div>
    <div class="answer" id="4"></div>
    <div class="answer" id="5"></div>
    <div class="answer" id="6"></div>
    <div class="answer" id="7"></div>
    <div class="answer" id="8"></div>
    <div class="answer" id="9"></div>
    <div class="answer" id="10"></div>
    <div class="answer" id="11"></div>
    <div class="answer" id="12"></div>
</div>
<div id="container>
    <div class="drag" id="3"></div> //draggables are in random order
    <div class="drag" id="1"></div>
    <div class="drag" id="2"></div>
    <div class="drag" id="6"></div>
    <div class="drag" id="5"></div>
    <div class="drag" id="12"></div>
    <div class="drag" id="4"></div>
    <div class="drag" id="8"></div>
    <div class="drag" id="7"></div>
    <div class="drag" id="11"></div>
    <div class="drag" id="9"></div>
    <div class="drag" id="10"></div>
</div>

每当有人将正确的可拖动对象放到正确的可放置对象上时，id就会存储在名为rightIds的数组中。

可以说rightIds是array(0=>3, 1=>7 2=>9)

我还有一个名为currentIds的数组，其中包含现在显示的ID。
currentIds现在是array(0=>1 to 11=>12)

我做了这个功能：

function resetAnimation(currentIds, rightIds) {
    $.each(currentIds, function (index, value) {
        $.each(rightIds, function(ind, val) {
        console.log('currentIds value: ' + value);
        console.log('rightIds val: ' + val);
        if (val == value) {
            var target = $('#' + value + '.answer');
            console.log(target);
            var targetTop = target.offset().top;
            console.log('targetTop: ' + targetTop);
            var targetLeft = target.offset().left;
            console.log('targetLeft: ' + targetLeft);
            var drag = $('#' + value + '.drag');
            console.log(drag);
            var dragTop = drag.offset().top;
            console.log('dragTop: ' + dragTop);
            var dragLeft = drag.offset().left;
            console.log('dragLeft: ' + dragLeft);
            drag.animate({
                'top': -target.offset().top,
                    'left': -target.offset().left
            }, 3000);
        }
    });
});
}

但是当我运行它时，拖动div不会到达目标位置，而是会到达其他位置。当我检查动画元素时，偏移量与目标偏移量相同，仅在值前加上“-”。我希望有人能告诉我我在做什么错以及如何解决这个问题。

谢谢

最佳答案

在您的代码中，如果您的drag元素位于相同的offset父级中，并且两个元素都位于绝对位置，则它应该与替换一样简单：

drag.animate({
  'top': -target.offset().top,
  'left': -target.offset().left
}, 3000);

带有：

drag.animate({
  'top': target.offset().top,
  'left': target.offset().left
}, 3000);

如果不是绝对定位，则它与设置偏移量并不完全相同，jQuery非常聪明，可以得出正确的相对定位，但是动画不使用此相同功能。如果失败，您可以使用：

$drag.animate(
    { top: $target.position().top - $drag.position().top
    , left: $target.position().left - $drag.position().left }, 3000);

用法示例

版本1-jQuery匹配

HTML已更新，因此按nnnnnn的正确建议有效（没有重复的ID）：

<div class="container">
    <div class="answer" id="answer-1"></div>
    <div class="answer" id="answer-2"></div>
    <div class="answer" id="answer-3"></div>
    <div class="answer" id="answer-4"></div>
    <div class="answer" id="answer-5"></div>
    <div class="answer" id="answer-6"></div>
    <div class="answer" id="answer-7"></div>
    <div class="answer" id="answer-8"></div>
    <div class="answer" id="answer-9"></div>
    <div class="answer" id="answer-10"></div>
    <div class="answer" id="answer-11"></div>
    <div class="answer" id="answer-12"></div>
</div>
<div class="container">
    <div class="drag" id="drag-3"></div>
    <div class="drag" id="drag-1"></div>
    <div class="drag" id="drag-2"></div>
    <div class="drag" id="drag-6"></div>
    <div class="drag" id="drag-5"></div>
    <div class="drag" id="drag-12"></div>
    <div class="drag" id="drag-4"></div>
    <div class="drag" id="drag-8"></div>
    <div class="drag" id="drag-7"></div>
    <div class="drag" id="drag-11"></div>
    <div class="drag" id="drag-9"></div>
    <div class="drag" id="drag-10"></div>
</div>
<div>
    <a id="get-answers">Get answers</a>
</div>

这样，JavaScript可以简化为将drag- [id]与answer- [id]匹配，并使用position jQuery method将drag元素移动到正确的位置：

// Animates right answered draggables
// to the right answers
function resetAnimation() {

    // Iterate over all of the drag elements
    $(".drag").each(function() {

        var $drag = $(this)

            // Get the id of the drag element
            // by dropping "drag-" off the front
          , id = $drag.attr("id").replace("drag-", "")

            // Find the matching answer
          , $target = $('#answer-' + id);

        // The animation code, position gives
        // the coordinates of the element relative
        // to the offset parent, subtract the original
        // position from the target position to get the
        // correct translation deltas
        $drag.animate(
            { top: $target.position().top - $drag.position().top
            , left: $target.position().left - $drag.position().left}, 3000);
    });
}

$(function() {
    $("#get-answers").click(resetAnimation);
});

版本2-数组匹配

如果您确实想坚持使用数组来实现此目的（我将使用对象文字并将其个人视为字符串ID），则对代码的修改如下：

// Animates right answered draggables
// to the right answers
function resetAnimation(answered, correct) {

    // Iterate over all of the drag elements
    for(var id in answered) {

        if(answered[id] !== correct[id]) {

            var $drag = $("#drag-" + id)

                // Find the matching answer
              , $target = $('#answer-' + correct[id]);

            // The animation code, position gives
            // the coordinates of the element relative
            // to the offset parent, subtract the original
            // position from the target position to get the
            // correct translation deltas
            $drag.animate(
                { top: $target.position().top - $drag.position().top
                , left: $target.position().left - $drag.position().left}, 3000);

        }

    }
}

$(function() {
    $("#get-answers").click(function() {
        resetAnimation({
            "1" : "3",
            "2" : "2",
            "3" : "1"
        }, {
            "1" : "2",
            "2" : "3",
            "3" : "1"
        });
    });
});

我用于这些测试用例的CSS：

.answer {
    float: left;
    margin: 10px;
    background: red;
    width: 20px;
    height: 20px;
}
.drag {
    position: relative;
    float: left;
    margin: 10px;
    background: green;
    width: 20px;
    height: 20px;
}
.container {
    float: left;
    width: 100%;
}

Here's a fiddle