我正在创建一个网站，允许用户搜索课程对象。一旦从预先输入的搜索中选择了一门课程，它就会被添加到一个篮子中。从这个篮子里，我将允许用户将课程拖放到4个不同学期（排列在引导网格中）中的一个所需学期（这是一个div）。

添加到篮子中的课程是常规的"风格"divs，也是我想在篮子和学期之间拖动的课程。我怎样才能做到这一点？

课程是这样创建的：

function createBox(item){
  var html = "";
  html += "<div class='courseBox' id='" + item.number +"'>" +
    "<h4 class='courseName'>" + item.name + "</h4>" +
    "<button class='btn btn-danger xOut'>X</button>" +
    "<p class='courseNumber'>" + item.number+ "</p>" +
    "<p class='coursePts'>ECTS: " + item.points + " pts</p>" +
    "</div>"
    return html;
};

并像这样添加到篮子中：

var course = createBox(item);
$(".myCourseList").append(course);

然后我想把它放进一个看起来像这样的学期：

<div class="row" id="fourth">
  <!-- typeahead field is here -->
  <h4>Basket</h4>
  <div class="myCourseList">
    <!-- BASKET CONTENT GOES HERE -->
  </div>
  <h4>1st Semester</h4>
  <div class="col-xs-12">
    <div class="col-xs-6">
      <h5>Courses</h5>
      <div class="courses" id="courses1">
        <!-- Course content here -->
      </div>
    </div>
  </div>
</div>

课程框样式：

.courseBox {
  position: relative;
  width: 100%;
  height: auto;
  border: thin solid #999;
  padding: 0 0 0 10px;
  margin-bottom: 5px;
  border-radius: 5px;
  background-color: #d3d3d3;
}
.coursePts{
  position: absolute;
  bottom: -5px;
  right: 7px;
}
.courseBox button {
  position: absolute;
  top: 5px;
  right: 5px;
}

我正在使用Bootstrap、JQuery，最近刚刚输入JQuery UI，但我以前没有使用过JQuery UI。但我知道其中有一些可拖动的东西。文档似乎有点让我困惑，所以如果有人能用外行的话来说，我会非常感激。

如何将课程divs拖到学期divs上？

第1版：

此外，当我已经在使用Bootstrap时，我在"包含"JQuery UI方面也遇到了一些问题。我将它们"包括"在哪个顺序中？

第2版：

我解决了问题。请参阅@ahgindia发布的第二条评论