読者です 読者をやめる 読者になる 読者になる

2つのテーブルでの行のドラッグ&ドロップ

2つのテーブル間で行をドラッグ&ドロップさせるサンプルを jQuery UI で書いてみました。

f:id:posturan:20160313172042j:plain


移動後に、

f:id:posturan:20160313172052j:plain

ということです。
HTMLとCSS
<div id="wrap-content">
   <div id="left-band">
      <table>
         <thead>
            <tr><th>No.</th><th>Name</th></tr>
         </thead>
         <tbody>
            <tr><td>1</td><td>AAA</td></tr>
            <tr><td>2</td><td>BBB</td></tr>
            <tr><td>3</td><td>CCC</td></tr>
         === 省略 ===
         </tbody>
      </table>
   </div>
   <div id="right-band">
      <table>
         <thead>
            <tr><th>No.</th><th>Name</th></tr>
         </thead>
         <tbody></tbody>
      </table>
   </div>
</div>

CSSでは、テーブルセルの色や背景を指定していた場合、ui-sortable-helper や、ui-state-highlight が着く td に、!importantでスタイルが上書きされないように、順番に注意して書くことです。
また、2つのテーブルサイズが同じになるように書いておくことです。

table{
   box-sizing: border-box
   border-collapse: collapse;
   border-spacing: 0;
   background-color: #f2f2f2;
   white-space: nowrap;
   display: block;
}
.ui-sortable-helper td{
   background: #f6a828 !important;
   color: #ffffff !important;
   font-weight: bold;
}
.ui-state-highlight td{
   background: #ffe45c url("images/ui-bg_highlight-soft_75_ffe45c_1x100.png") 50% top repeat-x !important;
}

#wrap-content{
   width: 654px;
   margin: 0 auto;
   padding: 10px 20px;
}
#wrap-content table{ width: 265px; }
#wrap-content th{ background-color: #bee0c2; }
#wrap-content td{ background-color: #ffffff; }
#wrap-content td, #wrap-content th{ border: 1px solid #404040; height: 40px; font-size: 16px; }
#wrap-content th:nth-child(1){ width:40px;  }
#wrap-content th:nth-child(2){ width:200px; }

#wrap-content td:nth-child(1){ width:40px;  min-width:40px;  text-align: center; }
#wrap-content td:nth-child(2){ width:200px; min-width:100px; }
#wrap-content tbody{
   border-bottom: 1px #c0c0c0 solid;
   height: 300px;
   display: inline-block;
   overflow-y: scroll;
}
#left-band{
   float: left;
   padding: 10px 30px;
}
#right-band{
   float: left;
   padding: 10px 30px;
}

JavaScript は、以下のように書きます。

$(function(){
   $('#left-band tbody').sortable({
      placeholder: "ui-state-highlight",
      cursor: "move",
   });
   $('#left-band table').droppable({
      hoverClass: "drophover",
      tolerance: "pointer",
      drop: function(e, ui){
         // ドロップ先に追加
         $('#left-band tbody').append("<tr>" + ui.draggable.html() + "</tr>");
         // 元を削除
         ui.draggable.remove();
      }
   });

   $('#right-band table').droppable({
      hoverClass: "drophover",
      tolerance: "pointer",
      drop: function(e, ui){
         // ドロップ先に追加
         $('#right-band tbody').append("<tr>" + ui.draggable.html() + "</tr>");
         // 元を削除
         ui.draggable.remove();
      }
   });
   $('#right-band tbody').sortable({
      placeholder: "ui-state-highlight",
      cursor: "move",
   });
});

droppable のオプション tolerance: は、

"pointer"  ・・・マウスポインタが入った
"fit"     ・・・Draggable要素が完全に入った場合
"intersect" ・・・Draggable要素が半分以上入った場合
"touch"   ・・・接触した

で、ドロップ実行になるように指定します。