在 Knockout 可排序的 Move 事件之后更改元素的 CSS答案

【问题标题】：Change CSS of element in after Move event of Knockout sortable在 Knockout 可排序的 Move 事件之后更改元素的 CSS
【发布时间】：2015-06-10 19:34:08
【问题描述】：

我想更改元素的 CSS，一旦它被拖放（afterMove 事件）到使用淘汰排序库的容器。我尝试获取包含该元素的 div 的 ID，并在 afterMove 事件中将其 CSS 修改为：

document.getElementById('container').style.backgroundColor="yellow";

上面的代码不会改变被移动元素的颜色，而是改变可观察元素数组中的第一个元素。我附上了当前情况的JS提琴手。他们是否可以访问被移动元素的div 的 ID，以便仅更改该特定元素的 css？

Attached JS fiddler

【问题讨论】：

如果您将 bobby 移到其他桌子上，您希望将颜色更改为黄色？或从功能角度解释。欢呼
试试这个并告诉我jsfiddle.net/supercool/UdXr4/843。如果您尝试移动到其他表，则只有 bobby 名称为 table1 时为红色，bobby 颜色将变为黄色
@supercool 是的！我正在尝试将移动元素的颜色更改为黄色。所以，如果我把 Bobby 移到另一张桌子上，它应该会变成黄色。更新了有问题的小提琴。
查看之前的评论并告诉我。欢呼
您需要“在聊天中继续讨论”这一事实在 IMO 中表明该问题尚不清楚。我投票决定关闭，因为我认为 OP 首先需要将代码从 fiddle 缩减为 minimal repro，并将其包含在 问题中。就目前而言，这个问题没有足够的信息来回答它。否则，这个问题对未来的访问者几乎没有用处，尤其是在链接失效的情况下。

标签： css knockout.js knockout-sortable

【解决方案1】：

为你的学生添加一个移动的属性

var Student = function(id, name, gender) {
    this.id = id;
    this.name = ko.observable(name);
    this.gender = gender;
    this.moved = ko.observable(false);
};

为项目绑定 CSS 以使用它：

<div id="container" style="background-color: white; margin:4px;">
    <p data-bind="text: name, css:{two:moved}"></p>
</div>

移动后设置属性：

this.updateLastAction = function(arg) {
    arg.targetParent()[arg.targetIndex].moved(true);
};

http://jsfiddle.net/UdXr4/846/

【讨论】：