javascript:sortableを使って特定の部分のみ並び替えられる機能

###前提・実現したいこと
スマートフォンで１つの部分のみ有効にして並び替え機能を作成したい。
(下記HTML内のtd class="handle")

###発生している問題・エラーメッセージ

sortableを使っていて、タッチが効いてほしくない部分でもタッチが効いて並び替えができてしまう。

###該当のソースコード

HTML
1<tbody class="sortable">
2#{list items: dists , as: 'i' }
3<tr>
4				<td class="text-center"><input type="checkbox" name="checkIds" value="${i.id}" class="icheck checks"></td>
5				<td class="handle">${i_index}<input type="hidden" name="ids" id="${i_index}" value="${i.id}"></td>
6				<td><a href="@{detail(i.id)}">${i.id}</a>
7</tr>
8#{/list}
9</tbody>

Javascript
1$(function(){
2   $('.sortable').sortable();
3});

###試したこと
draggableの書き方を試してみたが、書き方が悪くできなかった

###補足情報(言語/FW/ツール等のバージョンなど)
HTML、Javascript
UI jquery-ui-1.11.4.custom

行動規範の内容に同意します

回答1件

ベストアンサー

デフォルトの機能にはありませんでした（多分）ので、下記のコードを試してみてください。

//javascript
$(function(){
   $('.sortable').sortable(
   {
      items:$(".handle"),
      update: function(event, ui ) {
        remakeTable( ui.item[0] );
        $('.sortable').trigger('create');
    }
   });
  
  function remakeTable( cutTD )
  {

    $('.sortable').find('tr').each(function(){
        var tr = $(this);
        var handleCount = 0;
        tr.find('td').each(function()
        {
          td = $(this);
          if(td.hasClass("handle"))
          {
            handleCount ++;
          }
        })
        //移動先
        if(handleCount === 0)
        {
          $toTRNum = $('.sortable tr').index(tr);
        }
        if(handleCount === 2)
        {
          $fromTRNum = $('.sortable tr').index(tr) ;
        }
    });

    $('.sortable tr:nth-child(' + ($fromTRNum + 1 )+ ') td' ).each(function(){
      if($('.sortable tr td').html() !==  cutTD.innerHTML && $(this).hasClass("handle") )
        {
          $fromTD = $(this);
        }
    });

    $('.sortable tr').eq($toTRNum).find(".text-center").after( $fromTD );
    //セレクタをtext-centerクラスにしているので、注意してください。
  }
});

下記htmlでうまくいきました

<!--html-->
<table>
<tbody class="sortable">
<tr> 
<td class="text-center"><input type="checkbox" name="checkIds" value="1a" class="icheck checks"></td>
                <td class="handle">aaa1<input type="hidden" name="ids" id="2" value="2a"></td>
                <td>bbb1</td> 
  </tr> 
  <tr>               <td class="text-center"><input type="checkbox" name="checkIds" value="1b" class="icheck checks"></td> 
                <td class="handle">aaa2<input type="hidden" name="ids" id="2" value="2b"></td> 
                <td>bbb2</td>
</tr>
  <tr> 
                <td class="text-center"><input type="checkbox" name="checkIds" value="1c" class="icheck checks"></td> 
                <td class="handle">aaa3<input type="hidden" name="ids" id="2c" value="2"></td> 
                <td>bbb3</td>
</tr>
</tbody>
</table>

投稿2017/01/20 08:07