标签: knockout-sortable

我只是遇到了使用Knockout和Knockout-sortable插件制作的To-do-like sortable列表的另一个问题.

我需要在当前时间放置的元素下放置一个红色分隔符,如果在该分隔符之前删除了一个元素,则取消排序.

我尝试使用"可见"绑定并且它以某种方式工作,但是visibile绑定只是隐藏了DOM元素,它搞乱了可排序的arrayIndex,为它添加了不必要的元素.

<div class="delimiter" data-bind="visible: time() == $root.limit()"></div>

"if"绑定会更好,因为它只在必要时插入DOM元素,但我用于visible的表达式总是被评估为true,我无法弄清楚为什么......

<div class="delimiter" data-bind="if: time() == $root.limit()"></div>

这是小提琴:http://jsfiddle.net/ingro/VaqqF/

任何帮助表示赞赏,谢谢!

我正在使用knockout.js可排序的插件; 但是,我遇到了一个我迄今无法解决的问题.我有两个可排序的绑定,一个用于存储桶,另一个用于bucketItems.我能够在桶之间重新排序bucketItems; 但是,我无法重新排序桶.你知道为什么会这样吗？我也使用嵌套绑定,但据我所知,这不是导致问题的原因.

我非常感谢您提供的任何见解.

我有一个淘汰可排序的列表,里面有淘汰的可排序列表.基本上它是基本的"可用学生"示例(http://jsfiddle.net/rniemeyer/UdXr4/),只是我希望表格也可以排序.

我主要工作,但我有一个问题,能够将表拖动到其他表.

我能够在表格列表中添加一个allowDrop函数,以防止学生被放入表格列表,

        this.isTable = function(arg) {
            return arg.sourceParent != undefined;
        };

所以我希望在学生名单上有类似的东西,不允许有桌子,但对于我的生活,我无法理解.我试过看id,甚至看看性别属性是否可用(因为它应该只对学生来说)无济于事......

我编辑了一个jsfiddle,使它更像我的情况; 你会看到你拖动一张桌子,你可以把它放到另一张桌子里. http://jsfiddle.net/nYSLq/1/

任何帮助或建议将不胜感激.

在knockout-sortable中,我知道您可以isEnabled在sortable绑定中禁用可排序列表.我也知道你可以cancelDrop在一个beforeMove函数中禁用移动项目.问题是,isEnabled禁用整个列表,并且cancelDrop只能在项目已拖放到另一个项目后调用sortable.

有没有办法禁用sortable某些包含项目的点击/拖动行为？

我有一张可分类的扑克牌清单.为了显示牌的顶部,我给每张牌一个负底线.一旦我这样做,jQuery可排序变得非常复杂并且难以使用.我怎样才能消除这个傻瓜呢？ 在闪烁的顶部,我如何获得适当的垂直对齐拖动？看来我必须在列表的上方或下方行,以使其将占位符移动到列表的那些边.

我把我的代码放在http://jsfiddle.net/otac0n/wDTwX/上,这样你就能感受到它,但这里有它的要点:

// HTML
<div class="deck" data-bind="sortable: { data: Cards, options: { placeholder: 'card', cursorAt: { left: 5, top: 5 }, tolerance: 'pointer' } }">
    <div class="card" data-bind="text: Name, style: { background: Color }"></div>
</div>

// CSS
.deck
{
    margin: 10px;
    padding: 0 0 130px 0;
}

.card
{
    width: 100px;
    height: 150px;
    border: 1px solid black;
    border-radius: 8px;
    background: White;
    color: White;
    margin: 0 0 -130px 0;
    padding: 5px;
}

// JS
var vm = { …

我使用knockout-sortable.js让用户拖放项目给他们一个不同的顺序,但是当我在我的页面上有多个"drop zone"时,我遇到了问题.我有嵌套集,所有这些集都是可排序的,但不可互换.

我的代码:

    <div class="sortable" data-bind="sortable: blueprint.pages">
          <tr><td>Blabla</td></tr>
    </div>

在其他一些方面:

    <div class="sortable" data-bind="sortable: selectedPage().page_sections">
          <tr><td>Another blabla</td></tr>
    </div>

我现在可以将'Another blabla'拖放到'Blabla'中,导致错误.我怎样才能防止这种情况发生？

如何使用knockout更改表的行顺序.我有小提琴:

使用knockout-sortable.js.例

请协助.我的小提琴如下:

JSFiddle示例

  [1]:http://jsfiddle.net/rniemeyer/hw9B2/
  [2]:https://jsfiddle.net/nagarajputhiyavan/x9vc10zu/3/

也许有人可以帮助我.
我在webapp中获得了大量的视图.左侧有产品列表,右侧有类别列表.产品应该在类别中拖动.
产品列表是一个observableArray.现在,当列表有超过1000个条目时,我们遇到了性能问题(特别是在IE上).因此,因为产品本身不会改变,我们将它们从敲除绑定中取出,将它们连接在一个字符串中并仅附加一个节点.当然,淘汰赛的可排序装订不再适用了......

这是类别的模板:

<div data-bind="sortable: {data: Products, beforeMove: $root.verifyProducts}, attr: { 'data-max': MaxProducts }">
<div class="menuEditTab2CatDragItem clearfix" data-bind="attr: { 'data-prodid': Id }">
    <div class="menuEditTab3ProdsNameText" data-bind="text: Name"></div>
    <div class="pull-right" style="margin-left:8px;"><i style="margin-top:-4px;" class="icon-remove" data-bind="click: $parent.removeProduct"></i>

    </div>
    <div class="pull-left menuEditTab3ProdsIdText">ID: <span data-bind="text: Id"></span>
    </div>
</div>

这是左侧产品列表的js代码:

function fillAllProductsTab() {
        var parts = '';
        allProducts.forEach(function (item) {
            parts += '<div id="f_all_' + item.Id + '" >' +  // draggable="{data: $data, options:{containment: \'\#menuEditTab3Ce\', revert: \'invalid\'}}"
                '<div class="menuEditTab2CatDragItem">' +
                '<div>' + item.Name + '</div><div class="clearfix …