Question

我有以下情况，我们可以在座位内拖放到学生。在下面的图像中，我们可以看到代表座位的白色图像以及在座位上显示学生的男孩和女孩的图像。

当学生出现在该座位上时，我能够将学生转移到其他学生座位上。我们可以在下面的图片中看到。有一个空白的座位，表明座位是空白的，在座位上有两个学生共用一个座位。

enter link description here

但如果座位上没有学生那么拖延时间不能正常工作。这里不能正常工作意味着当我们拖动学生并放下座位时它将无法工作但如果我们拖放到座位下方则工作正常。

enter link description here

所以在这里，我希望当我将学生拖到一个空白的座位上然后离开鼠标然后它会坐在那个座位上时？

我正在使用带有jquery版本1.11

的jquery可排序插件

以下代码段为html：

<ul class="list-inline text-center connectedSortable" id="sortable">
    <li class="col-lg-2 col-md-2 col-sm-2"><img src="images/student.png" alt="girl_student_image" class="student">
      <div class="studentname">ID - ABC2</div>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-2 "><img src="images/girl_student.png" alt="student_image" class="student">
      <div class="studentname">ID - ABC3</div>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-2"><img src="images/student.png" alt="girl_student_image" class="student">
      <div class="studentname">ID - ABC4</div>
    </li>
</ul>

<ul class="list-inline text-center" id="sortable"></ul>

启动插件的代码

$( "#sortable" ).sortable({
    cancel: "div.studentname",
    cursor: "move",
    distance: 5,
    items: "> li > ",
    revert: true,
    scroll: false,
    tolerance: "pointer",
    });
$( "#sortable" ).disableSelection();

UL-LI分拣不正常

0 个答案: