把李从一个城市拖到另一个城市

dragging li from one ul to another ul

本文关键字：城市 一个 另一个      更新时间：2023-09-26

我正试图使用jquery ui draggable和dropable将<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。。

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

相关文章：