I'm trying to move a <li>
from one <ul>
to another <ul>
using jquery-ui draggable and droppable.
Currently I have
<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>
$("#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");
}
How do I move test1 and test2 from the basket and to the courses?
Right now I can drag #test1
and #test2
around inside the basket, and it will run basketCourse()
, but it never seems to be able to allow me to drop either of them inside courses.
I am using bootstrap, jquery and jquery-ui..
您的列表没有足够的高度掉落物品存在,只是设置min-height: 100px
或任何你想要的,你就可以有掉落物品- https://jsfiddle.net/825pqyz8/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.