將李從一個ul拖到另一個ul

Question

我正在嘗試使用jquery-ui draggable和droppable將<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");
}

如何將test1和test2從購物籃移至課程？

現在，我可以在購物籃中拖動#test1和#test2 ，它將運行basketCourse() ，但它似乎永遠無法讓我將它們中的任何一個放入課程中。

我正在使用引導程序，jquery和jquery-ui ..

Answer 1

您的列表沒有足夠的高度掉落物品存在，只是設置min-height: 100px或任何你想要的，你就可以有掉落物品- https://jsfiddle.net/825pqyz8/