Question

我尝试创建一个简单的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>

由服务器端事件调用的JavaScript函数：

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

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

Answer 1

你可以做这样简单的事情：

http://jsfiddle.net/Nd6dc/

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;
});

Answer 2

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

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);
        });
}

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

jQuery移动元素有效

2 个答案: