Bootstrap 和 JQuery 可拖动

Question

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

添加到购物篮的课程是常规的“样式化”div，是我希望在购物篮和学期之间可拖动的课程。我怎样才能做到这一点？

课程是这样创建的：

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，但我知道其中有一些可拖动的东西。文档似乎让我有点困惑，所以如果有人可以用外行的话，我会非常感激。

如何使课程 div 可拖动到学期 div 上？

编辑1：

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

编辑2：

我解决了问题。参考@ahgindia 帖子的第二条评论

Answer 1

你需要结合使用 draggable() 和 droppable() 请参阅 http://jqueryui.com/droppable/#shopping-cart 以获取与您的设置匹配的完整示例。

Answer 2

尝试使用 draggable()。

您可以将对象与 draggable() 一起使用。