如何在表格的特定位置使用jQuery UI draggable和droppable？

Question

我想拖动表中的一些项目，并将它们放到其他有特定编号的表行上！(所以我不想要jquery-UI-sortable)，这是我的工作：jsfiddle

<table width="320px">
<tbody>
    <tr style="line-height:30px">
        <td width="10%">Pos1</td>
        <td width="90%" rowspan="5">
            <div class="dragable-object" >Item 1</div>
            <div class="dragable-object" >Item 2</div>
        </td>
        </tr>
    <tr style="line-height:30px"><td class="position" width="10%">Pos2</td>
    <tr style="line-height:30px"><td class="position" width="10%">Pos3</td>
    <tr style="line-height:30px"><td class="position" width="10%">Pos4</td>
    <tr style="line-height:30px"><td class="position" width="10%">Pos5</td>
</tbody>
</table>

<script type='text/javascript'>

$(".dragable-object").draggable({
    revert: "invalid"        
});

$(".position").droppable();
</script>

我该怎么做呢？

Answer 1

你可以试试这个，

$(function() {
    $(".dragable-object").draggable({
        revert: "invalid", 
        cancel: "a.ui-icon",
        containment: "document",
        helper: "clone",
        cursor: "pointer"
    });
    $( ".position" ).droppable({
        tolerance: "touch",
        accept: ".dragable-object",
        classes: {"ui-droppable-active": "ui-state-highlight"},
        drop: function (event, ui) {
           var sss="<tr style='line-height:30px'><td class='position' width='50%'>";
           sss +=(ui.draggable.context.innerText);
           sss +="</td>";
           $("tbody").append(sss);
        }
   });
});

使用以下链接：http://jsfiddle.net/mL338128/46/

Answer 2

您的jQuery或jQuery UI库似乎有问题。使用jQuery 3.1.1和jQuery UI 1.12.1进行了测试

工作示例：https://jsfiddle.net/Twisty/fyxjLh3y/6/

HTML

<table width="320px">
  <tbody>
    <tr style="line-height:30px">
      <td width="10%">Pos1</td>
      <td width="90%" rowspan="5">
        <div class="dragable-object">Item 1</div>
        <div class="dragable-object">Item 2</div>
      </td>
    </tr>
    <tr style="line-height:30px">
      <td class="position" width="10%">Pos2</td>
    </tr>
    <tr style="line-height:30px">
      <td class="position" width="10%">Pos3</td>
    </tr>
    <tr style="line-height:30px">
      <td class="position" width="10%">Pos4</td>
    </tr>
    <tr style="line-height:30px">
      <td class="position" width="10%">Pos5</td>
    </tr>
  </tbody>
</table>

CSS

tr,
td {
  border: 1px solid #ccc;
}

.dragable-object {
  border: 1px solid #000;
  width: 10em;
}

.highlight {
  border-color: #000;
}

JavaScript

$(function() {
  $(".dragable-object").draggable({
    revert: "invalid",
    containment: "table"
  });

  $(".position").droppable({
    accept: "div",
    tolerance: "touch",
    classes: {
      "ui-droppable-hover": "highlight"
    },
    drop: function(e, ui) {
      ui.draggable.attr("style", "");
      $(this).append(ui.draggable);
      $(this).find(".dragable-object").draggable("destroy");
    }
  });
});