我正试图使用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/