gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 07:00:58 25 4
gpt4 key购买 nike

我正在尝试移动 <li>来自一 <ul>到另一个<ul>使用 jquery-ui 可拖放。

目前我有

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 从购物篮移至类(class)中?

现在我可以拖动#test1#test2在篮子里面绕来绕去,它会跑basketCourse() ,但它似乎永远不允许我将它们中的任何一个放在类(class)中。

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

最佳答案

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

关于javascript - 将 li 从一个 ul 拖到另一个 ul,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37057351/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com