Question

EDIT / tl;博士：看看这个jsfiddle：http://jsfiddle.net/VZKRM/2/

我有一组标签，标签内是一组应用程序。我正试图获取它，以便我可以在选项卡中拖动和排序应用程序，并通过拖放到另一个选项卡的标题将应用程序从选项卡拖到另一个选项卡中。

我已经能够使用淘汰的可排序库（https://github.com/rniemeyer/knockout-sortable）进行排序，但我似乎无法将其挂钩到其他选项卡中。

我想我正在错误地挂钩。这是html：

<div id="apps-tabs">
    <div id="apps-left">
        <div id="wrapper" class="wrapper NavPanel">
            <div class="NavData" id="v-nav">
                <ul id="tab-list" data-bind="foreach: Tabs">
                    <li class="TopNav drop-target">
                        <a data-bind="attr:{ tab: hash, 'tab-id': id }, text: name"></a>
                    </li>
                </ul>
                <div>
                    <a data-bind="click: addTab">Add new...</a>
                </div>
            </div>
        </div>
    </div>
    <div id="apps-right">
        <div id="tab-container" data-bind="foreach: Tabs">
            <div class="tab-content" data-bind="attr:{id:hash, 'tab-id':id}">
                <h1 data-bind="text: name"></h1>
                <ul class="my-apps" data-bind="sortable: {data: applications, connectClass: 'drop-target', options: { placeholder: 'app-drop-placeholder', delay: 50, tolerance: 'pointer' } }">
                    <li data-bind="attr:{'app-id':id}" class="app app-inner">
                        <div class="app-inner-anchor">&nbsp;</div>
                        <div style="height: 95px;">
                            <a data-bind="attr:{title:name, href:url, target:target}">
                                <img class="app-image" style="padding-top: 20px" data-bind="attr:{alt:name, src:imagePath}" />
                            </a>
                        </div>
                        <div style="height: 30px;">
                            <a data-bind="attr:{title:name, href:url, target:target}, text: name"></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

这是我的观点模型：

function TabViewModel(tabs) {
    var self = this;

    self.Tabs = ko.observableArray(tabs);
}

function Tab(name, id, hash, apps) {
    this.name = name;
    this.id = id;
    this.hash = hash;

    this.applications = ko.observableArray(apps || []);
}

function Application(name, id, url, imagePath, target) {
    this.name = name;
    this.id = id;
    this.url = url;
    this.imagePath = imagePath;
    this.target = target;
}

ko.applyBindings(new TabViewModel([
    new Tab('tab 1', 1, 'tab1', [
        new Application('app 1', 1, 'http://foo/foo/', 'http://foo/img.png', '_blank'), 
        new Application('app 2', 2, 'http://foo/foo/', 'http://foo/img.png', '_blank'), 
        new Application('app 3', 3, 'http://foo/foo/', 'http://foo/img.png', '_blank')]),
    new Tab('tab 2', 2, 'tab2', [
        new Application('app 4', 4, 'http://foo/foo/', 'http://foo/img.png', '_blank'),
        new Application('app 5', 5, 'http://foo/foo/', 'http://foo/img.png', '_blank'),
        new Application('app 6', 6, 'http://foo/foo/', 'http://foo/img.png', '_blank')]),
        ]));

如果不清楚是否有一个标签标题，并且其中的每个标题都有一个'drop-target'类。每个选项卡都有一个关联的div，其中包含一个'tab-container'类，它有一个ul，其中包含一个应用程序的'my-apps'类。每个应用程序都可以在它自己的ul中进行排序，但也可以放到tab标题的.drop-target上。一旦放在.drop-target上，它就会被添加到相关的.my-apps ul。

中

如何连接.drop-target以接受应用程序li？在小提琴中，我有两个功能BindSort / BindDrop，我想淘汰。

Knockout可拖动并可分拣到不同的掉落目标

0 个答案: