编辑/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"> </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 我想淘汰。