перетаскивание li из одной ul в другую ul

Question

Я пытаюсь переместить <li> от одного <ul> к другому <ul> используя jquery-ui draggable и droppable.

В настоящее время у меня есть

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-щ ..

Answer 1

Ваш список не имеет достаточную высоту, чтобы бросить туда элементы, просто установите min-height: 100px или что вы хотите, и вы будете в состоянии отказаться от предметов там - https://jsfiddle.net/825pqyz8/