將li從一個ul拖動到另一個ul

Question

我試圖將<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從籃下到課程？

現在我可以拖動#test1和#test2在籃子裏面，它會運行basketCourse()，但它似乎永遠不會讓我把它們放在課程中。

我使用的引導，jQuery和jQuery的UI ..

Answer 1

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