我是jQuery UI的新手，我试图在网站中创建拖放功能。我需要它做的是，当从页面的一侧拖动文本并将其放入页面另一侧的div中时，会显示特定的文本。一个很好的例子就是如果我将一个单词放入droppable div中，那个单词的定义就会显示出来。有没有人对如何做到这一点有任何建议？或者我可以在哪里寻找参考资料？这是我到目前为止所拥有的。
HTML
<div id="main_frame">
<div id="draggable_alerts">
<h2>Alerts</h2>
</div>
<div class="halfsie">
<div id="cas">
<h2 id="apu_btn">APU</h2>
<div id="apu_cas"></div>
<h2 id="avionics_btn">AVIONICS</h2>
<div id="avionics_cas"></div>
<h2 id="brakes_btn">BRAKES-GEAR-NWS</h2>
<div id="brakes_cas"></div>
<h2 id="pneumatics_btn">PNEUMATICS</h2>
<div id="pneumatics_cas"></div>
<h2 id="doors_btn">DOORS</h2>
<div id="doors_cas"></div>
<h2 id="electrical_btn">ELECTRICAL</h2>
<div id="electrical_cas"></div>
<h2 id="engines_btn">ENGINES</h2>
<div id="engines_cas"></div>
<h2 id="fc_btn">FLIGHT CONTROLS</h2>
<div id="fc_cas"></div>
<h2 id="fuel_btn">FUEL</h2>
<div id="fuel_cas"></div>
<h2 id="hydraulics_btn">HYDRAULICS</h2>
<div id="hydraulics_cas"></div>
<h2 id="misc_btn">MISCELLEANEOUS</h2>
<div id="misc_cas"></div>
<h2 id="smoke_btn">SMOKE-OVERHEAT</h2>
<div id="smoke_cas"></div>
</div>
</div>
<div class="halfsie">
<div id="alerts">
<div id="apu"></div>
<div id="avionics"></div>
<div id="brakes"></div>
<div id="pneumatics"></div>
<div id="doors"></div>
<div id="electrical"></div>
<div id="engines"></div>
<div id="fc"></div>
<div id="fuel"></div>
<div id="hydraulics"></div>
<div id="misc"></div>
<div id="smoke"></div>
</div>
</div>
</div>
</div>
JAVASCRIPT
$(function(){
var Alerts = {
apu: ["APU Power Fail", "APU Power Fault", "APU Generator Fail", "APU High Oil Temperature", "APU Hot Start", "APU Loss Overspeed Protection", "APU Starter Engaged", "APU Fire", "APU Fails Bite Check", "APU Door Fails to Open", "APU No Flame", "Left Fire Bottle Discharge"],
avionics: ["ADS 1 Fail", "ADS 2 Fail", "ADS 3 Fail", "AP 1 Fail", "AP 2 Fail", "Autopilots Fail", "Baroset 1 Fail", "Baroset 2 Fail", "Baroset 3 Fail", "CCD 1 Fail", "CCD 2 Fail", "Heading Comparison Monitor", "Heading and Roll Comparison Monitor", "Display Controller 1 Fail", "Display Controller 2 Fail", "IRS 1 Fail", "IRS 2 Fail", "IRS 3 Fail", "Glideslope Antenna Fail", "MAU 1A Fail", "MAU 1B Fail", "MAU 2A Fail", "MAU 2B Fail", "MAU 3A Fail", "MAU 3B Fail", "MRC 1 Fail", "MRC 2 Fail", "GPS Degrade", "GPS #1 Fail", "GPS #2 Fail", "Display Unit 1 Fail", "Display Unit 2 Fail", "Display Unit 3 Fail", "Display Unit 4 Fail", "GPS - Unable RNP"],
brakes: ["Antiskid Fail", "Touchdown Protection Fail", "Parking Brake Accumulator Fail", "Right Outboard Brake Overheat", "Left Outboard Main Tire Blowout", "Right Outboard Main Tire Blowout", "Both Left Main Tires Blown", "Both Right Main Tires Blown", "Wheel Despin Fail", "Nose Gear Not Up", "Left Main Gear Not Up", "Right Main Gear Not Up", "Left Main Gear Not Down", "Right Main Gear Not Down", "Nose Gear Not Down", "Left Main Gear Door Open", "Nose Gear Door Open", "Ldg Gear Indications Circuit Brkr Trips", "Ldg Gear Control Circuit Breaker", "Rudder Steering Fail", "Tiller Steering Fail", "Steer by Wire Fail", "Wow Fault(Amber)", "Wow Fault(Blue)", "Ldg Gear Downlock Pins Installed", "Ldg Gear Door Pins Installed"],
pneumatics: ["Left Air Conditioning System Fail", "Right Air Conditioning System Fail", "Left Cooling Turbine Hot", "Right Cooling Turbine Hot", "Select Manual Temperature Cockpit", "Select Manual Temp. Forward Cabin", "Select Manual Temp. Aft Cabin", "Left Wing Temperature Hot", "Right Wing Temperature Hot", "Left Wing Temperature Low", "Right Wing Temperature Low", "Left Bleed Air System Fail", "Right Bleed Air System Fail", "Left Bleed Air Hot", "Right Bleed Air Hot", "Left Bleed Air Pressure High", "Right Bleed Air Pressure Low", "Rapid Depressurization", "Cabin Pressure Low", "Outflow Valve Failing Closed", "CPCS Control Panel Fail", "CPCS Fail - Selected Manual", "CPCS Low Air Flow"],
doors: ["Radome Door Detected Open", "Fwd Ext Switch Panel Dr Detcted Open", "Main Cabin Door Detected Open", "Aft Water Service Door Detcted Open", "Ext. Baggage Door Detected Open", "Hydraulic Service Door Detected Open", "Tail Compartment Door Detected Open", "Aft Lav Service Door Detected Open", "Fuel Service Door Detected Open", "Oxygen Service Door Detected Open", "Pneumatic Service Door Detected Open", "External Power Door Detected Open", "R. Engine Lower Cowl Detected Open", "L. Engine Access Door Detected Open", "R. Engine Access Door Detected Open"],
electrical: ["Left Generator Fail", "Right Generator Fail", "Left AC Power Fail (Resettable)", "Left AC Power Fail (Non - Resettable)", "DC Reset", "L EPS NBP FAIL", "Hyd. Motor Generator Failure", "Left AC Power Fail (Source Fault)", "Right AC Power Fail (Source Fault)", "Left AC Power Fault", "Right AC Power Fault", "Left Essential DC - Batteries", "Right Essential DC - Batteries", "Left Essential TRU Fault", "Right Essential TRU Hot", "Left Main TRU Hot", "Right Main TRU Fault", "Left Main DC Bus Fault", "Right Main DC Bus Fault", "Left Battery Charger Fail", "Right Battery Charger Fail", "L. BPCU Fail (Non-Resetable)", "Both Batts Drained"],
engines: ["Left Engine Flameout", "Right Engine Flameout", "Left Engine Fire (Non Extinguishable)", "Rt Engine Fire (Non Extinguishable)", "Left Engine Fire (1 Bottle)", "Right Engine Fire (2 Bottle)", "Engine Fire Loop Alert (Good Test)", "Engine Fire Loop Alert (Fire)", "Left Fire Warning Test Failure", "Right Fire Warning Test Failure", "Left Fire Loop B Fault", "Right Fire Loop A Fault", "Left Engine Hot", "Right Engine Hot", "Left Engine Hot Start", "Right Engine Hot Start", "Bird Strike on Takeoff or Landing", "Dual Engine Flameout", "Left TR Fails to Deploy (Ground)", "Right TR Fails to Deploy (Ground)", "Left TR Unlocks", "Right TR Unlocks", "Right TR Switch Miscompare", "Left Engine Alt Control", "Right Engine Alt Control", "Left Engine High TGT", "Right Engine High TGT", "Left Engine High LP RPM", "Right Engine High LP RPM", "Left Engine High LP EVM", "Right Engine High LP EVM", "Left Oil Temperature High, Press Low", "Right Oil Temperature High, Press Low", "Left Oil Pressure Low (Amber)", "Right Oil Pressure Low (Amber)", "Left SAV Fails Open", "Right SAV Fails Open", "Throttle Quadrant 1 Fail", "Throttle Quadrant 2 Fail"],
fc: ["Elevator HOPS Activation", "Lateral HOPS Activation", "Rudder HOPS Activation", "Jammed Ailerons", "Jammed Spoilers", "Jammed Stabilizer", "Stick Shaker Activation", "Stick Pusher Activation", "Flaps Failed", "Stabilizer Failed", "Flap Asymmetry", "Flap Leak", "FLP/STB Sync Fail", "Uncommanded Stabilizer", "Flap Command Invalid", "AOA Probe 1 Fail", "AOA Probe 2 Fail"],
fuel: ["Left ALT Pump Fail", "Right ALT Pump Fail", "Left Main Pump Fail", "Right Main Pump Fail", "Fuel Imbalance", "Fuel Tank Temp", "FQMS Maintenance Required"],
hydraulics: ["Left Hydraulic Quantity Low", "Right Hydraulic Quantity Low", "Left Hydraulic Temperature Sensor Fail", "Right Hydraulic Temperature Sensor Fail", "Left Hydraulic Resevoir Hot", "Right Hydraulic Resevoir Hot", "Left Hydraulic Pump Fail", "Right Hydraulic Pump Fail", "Aux Hydraulic Hot", "Aux Hydraulic Fail", "PTU Hydraulic Fail"],
misc: ["Left Pitot Port Blocked (ADS 1)", "Right Pitot Port Blocked (ADS 2)", "Standby Pitot Port Blocked (ADS 3)"],
smoke: ["Aft Equipment Hot", "C AFT Floor Hot", "L AFT Floor Hot", "R AFT Floor Hot", "L Pylon Hot", "R Pylon Hot", "Aft Baggage Smoke", "Right Fire Detection Unit"]
}
var Messages = {
apu: ["APU PWR FAIL", "APU PWR FLT", "APU GEN FAIL", "APU HI OIL TEMP", "APU HOT START", "APU LOSS OVSD PROT", "APU STRTR ENGGD", "APU FIRE", "APU FLS BT CHCK", "APU DR FAIL TO OPEN", "APU NO FLAME", "L FIRE BTL DSCHG"],
avionics: ["ADS 1 FAIL", "ADS 2 FAIL", "ADS 3 FAIL", "AP 1 FAIL", "AP 2 FAIL", "ATPLTS FAIL", "BRST 1 FAIL", "BRST 2 FAIL", "BRST 3 FAIL", "CCD 1 FAIL", "CCD 2 FAIL", "HDG CMP MNTR", "HDG & RL CMP MNTR", "DSPLY CONTR 1 FAIL", "DSPLY CONTR 2 FAIL", "IRS 1 FAIL", "IRS 2 FAIL", "IRS 3 FAIL", "GLDSLP ANTA FAIL", "MAU 1A FAIL", "MAU 1B FAIL", "MAU 2A FAIL", "MAU 2B FAIL", "MAU 3A FAIL", "MAU 3B FAIL", "MRC 1 FAIL", "MRC 2 FAIL", "GPS DEGRAD", "GPS 1 FAIL", "GPS 2 FAIL", "DU 1 FAIL", "DU 2 FAIL", "DU 3 FAIL", "DU 4 FAIL", "GPS UNABLE RNP"],
brakes: ["ANTISKID FAIL", "TCHDN PROT FAIL", "PK BRK ACCUM FAIL", "R. OUTBD BRK FAIL", "L. OUTBD TIRE BLOW", "R. OUTBD TIRE BLOW", "BOTH L. TIRES BLOW", "BOTH R. TIRES BLOW", "WHL DESPIN FAIL", "NOS GR NOT UP", "L. MN GR NOT UP", "R. MN GR NOT UP", "L. MN GR NOT DWN", "R. MN GR NOT DWN", "NOSE GR NOT DWN", "L. MN GR DOR OPEN", "NOSE GR DOR OPEN", "LDG GR IND CRCT BK", "LDG GR CNT CRCT BK", "RDDR STR FAIL", "TLLR STR FAIL", "STR BY WR FAIL", "WOW FLT (AMBR)", "WOW FLT (BL)", "LDG GR DNLK PNS INST", "LDG GR DR PNS INST"],
pneumatics: ["L. AIR COND SYS FAIL", "R. AIR COND SYS FAIL", "L. COOL TURB HOT", "R. COOL TURB HOT", "SEL MAN TEMP CKPT", "SEL MN TMP FWD CBN", "SEL MN TEMP AFT CBN", "L. WNG TEMP HOT", "R. WNG TEMP HOT", "L. WNG TEMP LOW", "R. WNG TEMP LOW", "L. BLD AIR SYS FAIL", "R. BLD AIR SYS FAIL", "L. BLD AIR HOT", "R. BLD AIR HOT", "L. BLD AIR PRESS HI", "R. BLD AIR PRESS LO", "RAPID DEPRESS", "CBN PRESS LO", "OUTFLO FAIL CLSED", "CPCS CTRL FAIL", "CPCS FAIL - MAN", "CPCS LOW AIR FLO"],
doors: ["RAD DR DETECT OPN", "FWD SW PNL DR OPN", "MN CBN DR OPEN", "AFT WTR DR OPEN", "EXT BAG DR OPEN", "HYD SER DR OPEN", "TAIL COMP DR OPEN", "AFT LAV SER DR OPEN", "FUEL SER DR OPEN", "OXY SER DR OPEN", "PNEU SER DR OPEN", "EXT POWR DR OPEN", "R. ENG CWL DR OPEN", "L. ENG ACCS DR OPEN", "R. ENG ACCS DR OPEN"],
electrical: ["L. GEN FAIL", "R. GEN FAIL", "L. AC PWR FAIL (RESET)", "L. AC PR FL (NO RESET)", "DC RESET", "HYD MTR GEN FAIL", "HYD MTR GEN FAIL", "L. AC PR FL (SRC FAIL)", "R. AC PR FL (SRC FAIL)", "L. AC PWR FAULT", "R. AC PWR FAULT", "L. ESS DC - BATT", "R. ESS DC - BATT", "L. ESS TRU FAULT", "R. ESS TRU HOT", "L. MAIN TRU HOT", "R. MAIN TRU FAULT", "L. MAIN DC BUS FLT", "R. MAIN DC BUS FLT", "L. BAT CHARG FAIL", "R. BAT CHARG FAIL", "L. BPCU FAL (No Reset)", "BOTH BATTS DRND"],
engines: ["L. ENG FLAMOUT", "R. ENG FLAMOUT", "L. ENG FIRE (NO EXTIG)", "R. ENG FIRE (NO EXTIG)", "L. ENG FIRE (1 BOT)", "R. ENG FIRE (2 BOT)", "ENG FIR LP ALRT (GOOD)", "ENG FIR LP ALRT (FIRE)", "L. FIR WARN TST FAIL", "R. FIR WARN TST FAIL", "L. FIR LOOP B FAULT", "R. FIR LOOP A FAULT", "L. ENG HOT", "R. ENG HOT", "L. ENG HOT START", "R. ENG HOT START", "BIRD STRIKE", "DUAL ENG FLAMOUT", "L. TR FAILS DPLY (GRD)", "R. TR FAILS DPLY (GRD)", "L. TR UNLOCKS", "R. TR UNLOCKS", "R. TR SWTCH MSCMPRE", "L. ENG ALT CONT", "R. ENG ALT CONT", "L. ENG HIGH TGT", "R. ENG HIGH TGT", "L. ENG HI LP RPM", "R. ENG HI LP RPM", "L. ENG HI LP EVM", "R. ENG HI LP EVM", "L. OIL HI, PRESS LOW", "R. OIL HI, PRESS LOW", "L. OIL PRESS LOW (AMB)", "R. OIL PRESS LOW (AMB)", "L. SAV FAILS OPEN", "R. SAV FAILS OPEN", "THRTLE QUAD 1 FAIL", "THRTLE QUAD 2 FAIL"],
fc: ["ELEV HOPS ACTVATE", "LAT HOPS ACTVATE", "RUD HOPS ACTVATE", "JMMD AILRNS", "JMMD SPLRS", "JMMD STBLZR", "STK SHKR ACTIVATE", "STK PSHR ACTIVATE", "FLAPS FAIL", "STBLZR FAIL", "FLAPS ASYMTRY", "FLAP LEAK", "FLP/STB SYNC FAIL", "UNCMDED STBLZR", "FLP CMMD INVLD", "AOA PRB 1 FAIL", "AOA PRB 2 FAIL"],
fuel: ["L. ALT PMP FAIL", "R. ALT PMP FAIL", "L. MAIN PMP FAIL", "R. MAIN PMP FAIL", "FUEL IMBLNCE", "FUEL TNK TEMP", "FQMS MAINT REQD"],
hydraulics: ["L. HYD QTY LOW", "R. HYD QTY LOW", "L. HYD TEMP SEN FAIL", "R. HYD TEMP SEN FAIL", "L. HYD RESV HOT", "R. HYD RESV HOT", "L. HYD PUMP FAIL", "R. HYD PUMP FAIL", "AUX HYD HOT", "AUX HYD FAIL", "PTU HYD FAIL"],
misc: ["L. PITOT PT BLCKD (ADS 1)", "R. PITOT PT BLCKD (ADS 2)", "STBY PITOT PT BLCKD (ADS 3)"],
smoke: ["AFT EQUIP HOT", "C AFT FLR HOT", "L AFT FLR HOT", "R AFT FLR HOT", "L PYLON HOT", "R PYLON HOT", "AFT BAG SMOKE", "R. FIRE DETCTN UNIT"]
}
var alert = Object.keys(Alerts).length;
var cas = Object.keys(Messages).length;
for(var i in Alerts){
$.each(Alerts[i], function(ind, item){
$('<p>' +item +'</p>').appendTo('#' +i);
$('#' +i +' p').draggable({
contain: '#draggable_alerts',
cursor: 'point',
revert: true
})
})
}
for(var i in Messages){
$.each(Messages[i], function(ind, item){
$('<p>' +item +'</p>').appendTo('#' +i +'_cas');
$('#' +i +'_cas').droppable({
accept: i +'_cas',
})
})
}
})
感谢您的帮助和见解。
答案 0 :(得分：0)
听起来你正在尝试创建字典或闪存卡系统？
基本上你会创建一个jQuery UI .draggable()和一个jQuery UI .droppable()，droppable会接受draggables。在接受时，您需要找到相应的定义并使用它填充定义div。
我建议您阅读UI api。
http://jqueryui.com/draggable/和http://jqueryui.com/droppable/
编辑：在你的接受上，你似乎没有使用正确的课程。看看是否添加＆＃34;。＆＃34;在i帮助之前。