jQuery有效地移动元素

我尝试创建一个简单的HTML任务板、一些列和一些任务，其中包含将任务从一列移动到另一列的服务器端事件。使用jQuery，删除和添加元素很容易，但我需要一个效果（动画）来显示任务正在从A列移动到B列

HTML非常简单，只是一个视图div：

<div id="colA" class="column">
    <div id="task1" class="task">Task 1</div>
</div>
<div id="colB" class="column">
     <!-- move task1 here -->
</div>

---

使用jquery-1.8.3和jquery-1.9.2，但我不仅限于此，还可以使用其他库。

您可以做如下简单的事情：

---

这是我的完整功能。不完美，但适合我的需要。感谢mcpDESIGNS对jquery.animate（）的提示

函数移动任务（任务，到列）{
var任务=$（任务）；
var col=$（toColumn）；
var taskPos=task.offset（）；
var margin=task.css（“marginTop”）；
var colPos=列偏移量（）；
var offset=taskPos.left-colPos.left；
var-mleft；
如果（偏移量<0）{
mleft=“+=”+（偏移量*-1）+“px”；
}否则{
mleft=“-=”+（偏移量-列宽度（）+任务宽度（））+“px”；
}
css（{position:“absolute”，top:（taskPos.top-margin），left:taskPos.left}）
.animate（{left:mleft，top:+=20px}，500，function（）{
//动画完成
css（{位置：''，顶部：''，左侧：''}）；
});
}

---

它计算任务元素和新列之间的偏移量，如果将该列留给任务元素，则该偏移量为负值。任务元素没有绝对位置，但要使用动画，我们必须设置位置：绝对。动画完成后，回调函数将删除绝对位置并将该任务元素附加到新列中（appendTo将节点从其旧父级中删除）

您不打算提供任何您尝试过的代码吗？还不太激动：{var task=$（'#task'）；task.detach（）；task.appendTo（'#colB'）}我会做DOM操作，现在一些动画会很好。好的，我想我知道你的意思。我将尝试计算新的位置（在移动任务节点之后），并对其使用动画功能。我将很快发送反馈，谢谢。是的，你基本上需要将其落实到你自己的情况中，但我计算第二个任务列表的位置（这里我假设你正在尝试将其动画化到右侧），然后将其移到那里。我创建了基于间隔的setTimeout，只是为了创建一个接一个移动的更酷的外观。

function moveTask(taskId, fromId, toId) {
    // move #task1 from #colA to #colB with a nice animation
}

var $bCol = $('#colB'),
    bLeft = $bCol.position().left;

var time = 0;

$('.task').each(function () {
  var _this = $(this);

  setTimeout(function () {
    _this.animate({ left: bLeft });
  }, (time));

  time = time + 200;
});

function moveTask(task, toColumn) {
    var task = $(task);
    var col = $(toColumn);
    var taskPos = task.offset();
    var margin = task.css("marginTop");
    var colPos = col.offset();
    var offset = taskPos.left - colPos.left;
    var mleft;
    if (offset < 0) {
        mleft = "+=" + (offset*-1) + "px";
    } else {
        mleft = "-=" + (offset -col.width() + task.width()) + "px";
    }
    task.css({position:"absolute", top:(taskPos.top - margin), left:taskPos.left})
        .animate({left:mleft,top:"+=20px"}, 500, function() {
            // animation complete
            task.css({position:'',top:'',left:''}).appendTo(col);
        });
}