CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-draggablejquery-ui-droppable
Zeliax
Zeliax

Reputation: 5386

dragging li from one ul to another ul

I'm trying to move a <li> from one <ul> to another <ul> using jquery-ui draggable and droppable.

Currently I have

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

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

Upvotes: 0

Views: 2212

Answers (1)

t1m0n
t1m0n

Reputation: 3431

Your list doesn't have enough height to drop there items, just set min-height: 100px or whatever you want, and you'll be able to drop items there - https://jsfiddle.net/825pqyz8/

Upvotes: 1

Related Questions