2つのテーブル間で行をドラッグ&ドロップさせるサンプルを jQuery UI で書いてみました。
移動後に、
ということです。
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" ・・・接触した
で、ドロップ実行になるように指定します。