pav
10/5/2013 - 6:03 PM

Flight Scheduler

Flight Scheduler

sorter.js
content_copyfile_download
$(document).ready(function() {
  // Handler for .ready() called.
    $('.flight').draggable();
    $('.airport').droppable({ hoverClass: "correct",
                              drop: function ( event, ui ) {
                                  ui.draggable.remove();
                              }});
    $('.airport.lhr').droppable("option", "accept", ".lhr");
    $('.airport.ord').droppable("option", "accept", ".ord");
    $('.airport.hkg').droppable("option", "accept", ".hkg");
    $('.airport.lax').droppable("option", "accept", ".lax");
});
planesorter.html
content_copyfile_download
<!DOCTYPE html>
<head>
  <title>Plane Sorting!</title>
  <link rel="stylesheet" href="page.css"/>
</head>
<body>
<div class="header">JFK AIRCRAFT CONTROL</div>
<div class="outgoing">
  <div class="heading"><h2>Outgoing Flights</h2></div>
  <div class="flightbox">
    <p><div class="flight hkg">Flight #252 JFK -> HKG</div></p>
    <p><div class="flight lax">Flight #101 JFK -> LAX</div></p>
    <p><div class="flight ord">Flight #987 JFK -> ORD</div></p>
    <p><div class="flight lhr">Flight #643 JFK -> LHR</div></p>
  </div>
</div>
<div class="destinations">
  <div class="airport lhr">
    <h2>London Heathrow - LHR</h2>
  </div>
  <div class="airport ord">
    <h2>O'Hare Intl. - ORD</h2>
  </div>
  <div class="airport hkg">
    <h2>Hong Kong Intl. - HKG</h2>
  </div>
  <div class="airport lax">
    <h2>Los Angeles Intl. - LAX</h2>
  </div>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="sorter.js"></script>
</html>
page.css
content_copyfile_download
body {
    font-family:sans-serif;
}
.flightbox {
    padding:0 15pt;
}
.header {
    width:100%;
    text-align:center;
    font-size:30pt;
    font-weight:bold;
    border-bottom: 3px #000 solid;
    background:#DDD;
}
.heading {
    text-align:center;
    background:#f2d4ad;
}
.outgoing {
    margin-top:3px;
    float:left;
    width:270px;
    height: 329px;
    background: #EEE;
    border: 2px #AAA solid;
}
.destinations {
    float:right;
    width:310px;
}
.flight {
    border: 1px #000 solid;
    border-left: 15px #000 solid;
    background: #fff;
    font-weight:bold;
    width:200px;
    text-align:center;
}
.airport {
    margin:3px 0;
    padding:6pt 0;
    text-align:center;
    background:#cbdadc;
    border:3px #c0d0d2 solid;
}
.correct {
    background: #a4dc9b;
}
h2 {
    color:#3c4041;
    font-family:sans-serif;
    font-size:16pt;
}