-1

我尝试创建一个简单的 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 但我不限于此，也可以使用其他库。

4

2 回答 2

0

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

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;
});
于 2013-01-17T21:03:49.763 回答
0

这是我的完整功能。不完美，但适合我的需要。感谢 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);
        });
}

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

于 2013-01-19T23:20:39.097 回答