我在使用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>
每当有人在右侧droppable上删除右侧draggable时，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不会到达目标位置而是到达其他位置。当我检查动画元素时，偏移量与目标偏移量相同，只有值前面带有“ - ”。我希望有人可以告诉我我做错了什么以及如何解决这个问题。
感谢名单
答案 0 :(得分：1)
在你的代码中，如果你的drag元素位于同一个偏移父元素中，并且两者都是绝对定位的，那么它应该像替换一样简单：
drag.animate({
'top': -target.offset().top,
'left': -target.offset().left
}, 3000);
使用：
drag.animate({
'top': target.offset().top,
'left': target.offset().left
}, 3000);
如果它没有绝对定位，那么它与设置偏移量并不完全相同，jQuery足够聪明，可以计算出正确的相对定位，但是animate不会使用相同的功能。失败你可以使用：
$drag.animate(
{ top: $target.position().top - $drag.position().top
, left: $target.position().left - $drag.position().left }, 3000);
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将拖动元素移动到正确的位置：
// 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);
});
如果您确实希望坚持使用数组来支持这一点（我会使用对象文字并将数字视为字符串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%;
}
答案 1 :(得分：0)
您不仅可以使用css类来提供样式，还可以指定元素。
您可以执行类似
的操作<div class="answer" id="answer-2" class="answer q2"></div>
<div class="answer" id="answer-3" class="answer q3"></div>
...
<div class="drag" id="question-2" class="q2"></div>
<div class="drag" id="question-6" class="q6"></div>
现在，您可以使用他们的课程来匹配问题和答案。例如，对于每个问题，请获取课程var myClass = $(this).prop('class');并找到匹配的答案$("div.answer."+myClass);
答案 2 :(得分：0)