0

编辑/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')]),
        ]));

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

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

4

0 回答 0