Wie kann man jQuery UI ziehbar und ablegen an einer bestimmten Position in einer Tabelle verwenden?

Question

Ich möchte einige Elemente in einer Tabelle ziehen und sie in anderen Tabellenzeilen mit einer bestimmten Nummer ablegen! (So ​​will ich nicht jquery-UI-sortierbar) und hier ist meine Arbeit: 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> 

Wie soll ich das tun?

Answer 1

du versuchen,

$(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); 
     } 
    }); 
}); 

Verwenden folgenden Link: http://jsfiddle.net/mL338128/46/

Answer 2

Es scheint, als ob es ein Problem mit Ihrem jQuery oder jQuery UI-Bibliothek ist. Getestet mit jQuery 3.1.1 und jQuery UI 1.12.1

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