我尝试使用JQuery UI可排序列表构建基于Bootstrap的页面。 我在全局空间中有一个列表，在Tabs中有两个列表 我喜欢从外部列表拖动项目并将其拖放到选项卡导航以添加到列表
但是，当我切换到引导程序选项卡导航时，外部项目上的删除消失但不会出现在选项卡列表中 这是基于JQ UI“使用Tab连接列表”
的示例$(function() {
$( "#sortable0, #sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" );//.tabs();
$('#myTab a:last').tab('show');
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "slow", function() {
$tabs.tabs( "option", "active", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});
});
HTML
<div id="external-tab">
<ul id="sortable0" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">ExItem 1</li>
<li class="ui-state-default">ExItem 2</li>
<li class="ui-state-default">ExItem 3</li>
</ul>
</div>
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li><a href="#tabs-1" data-toggle="tab">Nunc tincidunt</a></li>
<li><a href="#tabs-2" data-toggle="tab">Proin dolor</a></li>
</ul>
<div class="tab-content">
<div id="tabs-1" class="tab-pane">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
</ul>
</div>
<div id="tabs-2" class="tab-pane">
<ul id="sortable2" class="connectedSortable ui-helper-reset">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
</ul>
</div>
</div>
</div>
答案 0 :(得分：5)
在过去的一年中，没有其他人能够回答你的问题......我猜这不再适用于你个人，但也许我们可以帮助解决这个问题给任何其他用户在Google上搜索解决方案，以包含jQuery UI的可拖动/可拖放项目的API，并与Bootstrap的标签组件集成。
如果我正确地阅读了您的问题，您希望能够将项目从外部列表拖动到两个标签中的任意一个。如果您的问题类似于我此刻亲自处理的问题，您可能还想将项目从第一个标签拖到第二个标签，反之亦然。我已经用适合这两种需求的解决方案更新了您的小提琴。这些列表也是可排序的，就像之前一样，也保留了从一个空间拖到另一个空间的项目类别。
我将来可能考虑添加的项目是：
但是，目前我所做的只是纠正你发布的解决方案。
更新的小提琴在这里：http://jsfiddle.net/cr8s/96dsB/30/
此外，由于互联网是一个变幻莫测的地方，事情一直在消失，这里有更新的JS（我保持HTML不变，而且已经在上面的问题中）：
var category = document.getElementById('ddl'),
product = document.getElementById('products'),
wattage = document.getElementById('wattage'),
refrigerators = new Array('Artic King AEB', 'Artic King ATMA', 'Avanti Compact', 'Bosch SS'),
dishWasher = new Array('Bosch - SHXUC', 'Asko DS', 'Blomberg', 'Amana');
var categoryChange = function() {
switch (category.value) {
case 'refrigerators':
products.options.length = 0;
for (i = 0; i < refrigerators.length; i++) {
createOption(products, refrigerators[i], refrigerators[i]);
}
break;
case 'dishWasher':
products.options.length = 0;
for (i = 0; i < dishWasher.length; i++) {
createOption(products, dishWasher[i], dishWasher[i]);
}
break;
default:
products.options.length = 0;
break;
}
productChange();
}
var productChange = function() {
switch (product.value) {
case 'Artic King AEB':
wattage.innerHTML = 400;
break;
case 'Artic King ATMA':
wattage.innerHTML = 500;
break;
case 'Avanti Compact':
wattage.innerHTML = 340;
break;
case 'Bosch SS':
wattage.innerHTML = 214;
break;
case 'Bosch - SHXUC':
wattage.innerHTML = 200;
break;
case 'Asko DS':
wattage.innerHTML = 187;
break;
case 'Blomberg':
wattage.innerHTML = 236;
break;
case 'Amana':
wattage.innerHTML = 150;
break;
default:
wattage.innerHTML = 'N/A'
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
category.addEventListener('change', categoryChange);
product.addEventListener('change', productChange);
/* Attempt starts from below
function findWattage(){
// span on the page that displays wattage
var wattage = document.getElementById('wattage');
// created a new variable to find which case is selected.
var wattageOnPage = wattage.something that will track which case is selected.value;
// do i have to equate wattage with wattageOnPage
//
return wattageOnPage;
}
function estimatedDailyUse(dailyUse){
if(button.onclick.id =="h1"){
return dailyUse = 1;
}
else if (button.onclick.id =="h3"){
return dailyUse = 3;
}
else if (button.onclick.id =="h6"){
return dailyUse = 6;
}
else if (button.onclick.id =="h24"){
return dailyUse = 24;
}
}
dailyEnergyConsumption = function() {
// final display div
var daily = document.getElementById('daily');
//initialize the variable
var dailyEnergyConsumed = 0;
//Read the wattage that is displayed.
// Track the 4 buttons and gather which button is clicked and accordingly pass that to the formula
// so whenever I will need the selected wattage I can call it like this and get value into my formula
wattageOnPage = findWattage();
//Formula (1,500 W × 1) ÷ 1,000 = 1.5 kWh
var dailyEnergyConsumed = (wattageOnPage * dailyUse)/1000;
//Display and store 1.5 Kwh and pass it on to next function
return dailyEnergyConsumed;
daily.innerHTML = dailyEnergyConsumed;
}
/*
annualEnergyConsumption = function(annualEnergy) {
take the variable dailyEnergyConsumed and multiply that by no of days the user enters
1.5 kWh × 365 (days) = 547.5 kWh
Store it but do not display this
Pass it to annual Cost function
*/
/*
var annualEnergy=0;
var text = document.getElementById('hour').value;
var allYear = document.getElementById('allYear').value;
var annualEnergy = dailyEnergyConsumed * text;
return annualEnergy;
}
*/
/*
annualCost = function() {
var utilityRate = document.getElementById('utilityRate').value;
var button = document.getElementById('annualCost');
var annualCostOperation = document.getElementById('annualCostOperation');
var annualCost = ( annualEnergy * utilityRate);
take var annualEnergy (547.5) K wh from annualEnergyConsumption function
capture what the user enters in Utility Rate textbox (11 cents per K Wh)
( Calculate 547.5 kWh × $0.11/kWh = $60.23/year)
Click on the button to disaplay it
}
*/希望能为一些人解决这个问题！它肯定让我更接近于解决我自己的用例，并且我可能会继续更新上面链接的小提琴，因为我添加了我之前提到的两个附加功能。