将 li 从一个 ul 拖到另一个 ul

Question

我正在尝试使用 jquery-ui 可拖放的方式将 <li> 从一个 <ul> 移动到另一个 <ul>。

目前我有

HTML

<div>
  <h4><span>basket</span></h4>
  <ul id="basket" class="basket">
    <!-- items -->
    <li id="test1">test1</li>
    <li id="test2">test2</li>
  </ul>
</div>

<div>
  <h4><span>courses</span></h4>
  <ul id="courses" class="courses">
    <!-- items -->
  </ul>
</div>

JS

$("#test1").draggable({
  revert: "invalid",
  containment: "document",
  cursor: "move"
});

$("#test2").draggable({
  revert: "invalid",
  containment: "document",
  cursor: "move"
});

$("#basket").droppable({
  accept: "li",
  activeClass: "ui-state-highlight",
  drop: function(event, ui) {
    basketCourse(ui.draggable);
  }
});

$("#courses").droppable({
  accept: "li",
  activeClass: "ui-state-highlight",
  drop: function(event, ui) {
    courseCourse(ui.draggable);
  }
});

function basketCourse(item){
  console.log("added course to basket");
}

function courseCourse(item){
  console.log("added course to courses");
}

如何将测试 1 和测试 2 从篮子中移到课程中？

现在我可以在篮子里拖动 #test1 和 #test2，它会 运行 basketCourse()，但它似乎永远无法让我将其中任何一个放在课程中。

我正在使用 bootstrap、jquery 和 jquery-ui..

Answer 1

您的列表没有足够的高度，无法将项目放在那里，只需设置 min-height: 100px 或任何您想要的，您就可以将项目放在那里 - https://jsfiddle.net/825pqyz8/