javascript - Bootstrap 和 JQuery 可拖动

Question

我正在创建一个允许用户搜索类(class)对象的网站。一旦从预输入搜索中选择了类(class)，它就会被添加到购物篮中。从那个篮子中，我将允许用户将类(class)拖放到 4 个不同学期(排列在 Bootstrap 网格中)中的所需学期(这是一个 div)。

添加到篮子中的类(class)是常规的“样式化”div，并且是我想要在篮子和学期之间拖动的内容。我怎样才能做到这一点？

类(class)是这样创建的:

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>

类(class)箱样式:

.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，但我知道其中有一些可拖动的东西。该文档似乎让我有些困惑，所以如果有人能用通俗易懂的方式解释它，我将不胜感激。

如何使类(class) div 可拖动到学期 div 上？

编辑1:

此外，当我已经在使用 Bootstrap 时，“包括”JQuery UI 也有一些问题。我将它们“包含”在哪个顺序中？

编辑2:

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

Answer 1

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