-1

ある列から別の列にタスクを移動するサーバー側イベントを使用して、単純な HTML タスクボード、いくつかの列、およびいくつかのタスクを作成しようとしています。jQuery を使用すると、要素の削除と追加は簡単ですが、タスクが列 A から列 B に移動していることを示す効果 (アニメーション) が必要です。

HTML は非常にシンプルで、view 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

これが私の完全な機能です。完璧ではありませんが、私のニーズには合っています。jquery.animate() のヒントを提供してくれた mcpDESIGNS に感謝します。

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 と新しい列の間のオフセットを計算します。これは、列が task-element に残されている場合は負になります。task-element には絶対位置はありませんが、animate を使用するには position:absolute を設定する必要があります。アニメーションが完了すると、コールバック関数は絶対位置を削除し、そのタスク要素を新しい列に追加します (appendTo は古い親からノードを削除します)。

于 2013-01-19T23:20:39.097 に答える