ziehen li von einer ul zur anderen ul

Question

Ich versuche, eine <li> von einem <ul> zu einem anderen <ul> mit jquery-ui ziehbare und dropable zu bewegen.

Derzeit Ich habe

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"); 
} 

Wie verschiebe ich test1 und test2 aus dem Korb und zu den Kursen?

Im Moment kann ich ziehen #test1 und #test2 um in dem Korb, und es wird basketCourse() laufen, aber es scheint nie in der Lage zu sein, mir entweder von ihnen in Kurse fallen zu lassen.

Ich bin mit Bootstrap, jQuery und jQuery-ui ..

Answer 1

Ihre Liste nicht genügend Höhe hat es Elemente zu fallen, setzen nur min-height: 100px oder was auch immer Sie wollen, und Sie werden in der Lage sein, Objekte fallen dort - https://jsfiddle.net/825pqyz8/