Animating an element to it's current position moves it somewhere else
I have the following self-contained test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Drag Tests</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
<style type="text/css">
#leftColumn
{
float: left;
width: 200px;
border-right: 1px solid gray;
background-color: #EEE;
}
#mainArea
{
float: left;
width: 600px;
background-color: #BBB;
}
.draggable
{
width: 120px;
height: 1em;
border: 1px solid gray;
text-align: center;
vertical-align: middle;
margin: 20px auto;
padding: 1em;
background-color: White;
}
.dropArea
{
width: 140px;
height: 1.3em;
border: 1px solid #CCC;
text-align: center;
vertical-align: middle;
margin: 20px auto;
padding: 1em;
background-color: White;
}
.hoverClass
{
border-color: Red;
}
</style>
<script type="text/javascript" language="javascript">
$(function () {
$(".draggable").each(function () {
var myElem = $(this);
myElem.data("OldLeft", myElem.offset().left).data("OldTop", myElem.offset().top);
myElem.animate({ "left": myElem.get(0).offsetLeft, "top": myElem.get(0).offsetTop }, "fast"); //added to test
});
$(".draggable").draggable({ revert: "invalid" });
$("#dropArea1").droppable({ hoverClass: "hoverClass" });
$("#leftColumn").droppable({
drop: function (event, ui) {
var myElem = ui.draggable;
myElem.animate({ "left": myElem.data("OldLeft") + "px", "top": myElem.data("OldTop") + "px" }, "fast");
}
});
});
</script>
</head>
<body>
<div id="leftColumn">
<div class="draggable">Block 1</div>
<div class="draggable">Block 2</div&开发者_开发百科gt;
<div class="draggable">Block 3</div>
</div>
<div id="mainArea">
<div id="dropArea1" class="dropArea"></div>
</div>
</body>
</html>
When refreshing this page, the three blocks on the left move, however they are being set to their current positions. I've tried various ways of getting their current position (.postion(), .offset(), .attr("offsetLeft")).
Any help?
I just finished writing something similar. Since you didn't define css position on the blocks, they default to relative. Passing in coordinates, via offset() or position() result in "the wrong answer" as all coords are relative to the parent div. What you want to do is move the blocks relative ("+=_px" or "-=_px) in your animate call.
What I had done was find the difference between the desitination and origin, and adjust the animate call appropriately. This fcn assumes the destination is above (ymmv);
function moveVidToDrop(dragItem, dropItem) {
var deltaTop = dropItem.offset().top - dragItem.offset().top;
var deltaleft = dropItem.offset().left - dragItem.offset().left;
var dirTop = '+=';
var dirLeft = '+=';
if (deltaTop < 0) {
dirTop = "-=";
deltaTop = Math.abs(deltaTop);
}
if (deltaleft < 0) {
dirLeft = "-=";
deltaleft = Math.abs(deltaleft);
}
dragItem.animate({ top: dirTop + deltaTop, left: dirLeft + deltaleft }, 0);
}
Similarly, if you want to send a draggable programatically home do:
.animate({ left: "0px", top: "0px" }, "slow")
加载中,请稍侯......
精彩评论