ziehen li von einem ul zu einem anderen ul

Ich versuche es zu verschieben <li> von einem <ul> zu einem anderen <ul> mit jquery-ui-draggable und abwerfbaren.

Derzeit habe ich

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 bewege ich mich test1 und test2 aus dem Korb und zu den Kursen?

Recht, jetzt kann ich ziehen #test1 und #test2 um in den Korb, und es läuft basketCourse(), aber es scheint nie in der Lage sein, mir zu erlauben, zu fallen, die entweder von Ihnen in Kursen.

Ich bin mit bootstrap, jquery und jquery-ui..

InformationsquelleAutor Zeliax | 2016-05-05



One Reply
  1. 1

    Ihrer Liste hat nicht genug Höhe zu fallen es Gegenstände, setzen Sie einfach min-height: 100px oder was immer Sie wollen, und Sie werden in der Lage sein, um drop-Elemente, die es – https://jsfiddle.net/825pqyz8/

    • Ich wusste, es war etwas so dumm, wie diese gehalten, dass es funktioniert. Danke Kumpel. You made my day! 😛

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.