JQueryでtableを利用したドットエディタを作り、PC、スマートフォン両方で動作させたい。

Question

###前提・実現したいこと
jqueryでwordpress上にtableで方眼を作り、マスを塗りつぶすエディタを作っています。

iOS,androidでtouchmoveを動作させ、指でなぞったマス全てを塗りつぶしたいです。
また、違うテーブルの対応したマスも同時に塗りつぶします。
（.body_x またはsleeve_x）

それぞれのtableを塗ると対応した別のテーブルも同時にぬりつぶされる、というイメージです。

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

指をスライドさせても最初の1マスしか塗りつぶせません。
PCではクリックで1マスのみ塗る、ドラッグでなぞったマス全てを塗る両方実現できています。

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

<div class="doteditor">
			<div class="dottlanslate">
			<table id="canvas" class="canvas body"></table>
			</div>
			<table id="palette"></table>
</div>

<div class="doteditor">
			<div class="dottlanslate">
			<table id="canvas3" class="canvas body"></table>
			</div>
			<table id="palette"></table>
</div>

<div class="doteditor">
			<div class="dottlanslate">
			<table id="canvas2" class="canvas body"></table>
			</div>
			<table id="palette"></table>
</div>

<div class="doteditor">
			<div class="dottlanslate">
			<table id="canvas4" class="canvas body"></table>
			</div>
			<table id="palette"></table>
</div>

jQuery(function($) {
  var isTouch = ('ontouchstart' in window);
  var pals = ['000', '088', '00d', '438', '800', '888', '8cf', 'aa2', 'b82', 'c18', 'fbb', 'e00', 'fd0', 'feb', 'ddd', 'fff'];
  var pushed = false;
  var color = '';
  var text  =  0;

  var row = '<tr>';
  for (i = 0; i < 16; i++) row += '<td>&nbsp;</td>';
  row += '</tr>';

  for (i = 0; i < 16; i++) $('.canvas').append(row);

  $('#canvas td').each(function(i){
  $(this).addClass('dot body_' + (i+1));
  });

  $('#canvas3 td').each(function(i){
  $(this).addClass('body_' + (i+1));
  });

  $('#canvas2 td').each(function(i){
  $(this).addClass('sleeve_' + (i+1));
  });

  $('#canvas4 td').each(function(i){
  $(this).addClass('sleeve_' + (i+1));
  });

  $('#canvas5 td').each(function(i){
  $(this).addClass('sleeve_' + (i+1));
  });


  $('#palette , #palette2').html(row);
    for (i = 0; i < 16; i++) $('#palette td,#palette2 td').eq(i).css({backgroundColor: '#' + pals[i]});
  for (i = 0; i < 16; i++) $('#palette td,#palette2 td').eq(i).text(i);
    for (i = 0; i < 16; i++) $('#palette2 td').eq(i).css({backgroundColor: '#' + pals[i]});
  for (i = 0; i < 16; i++) $('#palette2 td').eq(i).text(i);


  $('td').each(function (i) {
  i = i+1;
  $('.body_' + i).bind('touchstart', function() {
    event.preventDefault();
    this.pageX = event.changedTouches[0].pageX; 
    this.pageY = event.changedTouches[0].pageY;
    pushed = true;
    $('.body_' + i).text(text);
    $('.body_' + i).css({backgroundColor: color});
    return false;
  }).bind('touchmove', function(event) {
    event.preventDefault();                     
    this.pageX = event.changedTouches[0].pageX; 
    this.pageY = event.changedTouches[0].pageY;
    var touch = event.originalEvent.touches[0];
    var target = $(document.elementFromPoint(touch.clientX, touch.clientY));
    if (target.hasClass('dot')) $('.body_' + i).text(text);
    if (target.hasClass('dot')) $('.body_' + i).css({backgroundColor: color});
    return false;
  });
  });

  $(document).bind('touchup' , function() {
    pushed = false;
  });

  $('td').each(function (i) {
  i = i+1;
  $('.body_' + i).mousedown(function() {
    pushed = true;
    $('.body_' + i).text(text);
    $('.body_' + i).css({backgroundColor: color});
    return false;
  }).mousemove(function() {
    if (pushed) $('.body_' + i).text(text);
    if (pushed) $('.body_' + i).css({backgroundColor: color});
    return false;
  });
  });


  $('td').each(function (i) {
  i = i+1;
  $('.sleeve_' + i).mousedown(function() {
    pushed = true;
    $('.sleeve_' + i).text(text);
    $('.sleeve_' + i).css({backgroundColor: color});
    return false;
  }).mousemove(function() {
    if (pushed) $('.sleeve_' + i).text(text);
    if (pushed) $('.sleeve_' + i).css({backgroundColor: color});
    return false;
  });
  });
    
  $(document).mouseup(function() {
    pushed = false;
  });



  $('#palette td').click(function() {
    $(this)
    .css({borderColor: 'yellow'})
    .siblings()
    .css({borderColor: 'gray'});
    color = $(this).css('background-color');
    text  = $(this).text();
  }).eq(0).click();
  $('#palette2 td').click(function() {
    $(this)
    .css({borderColor: 'yellow'})
    .siblings()
    .css({borderColor: 'gray'});
    color = $(this).css('background-color');
    text  = $(this).text();
  }).eq(0).click();

  
});

table {
  border-collapse: collapse;
  margin-bottom: 16px;
}
td {
  border: 1px solid gray;
  width: 20px;
  line-height: 20px;
  cursor: pointer;
  font-size: 9px;
}

.doteditor{
	position: relative;
	width: 370px;
	height: 400px;
	z-index: 1;
}

.dottlanslate{
	width: 320px;
	height: 320px; 
}

.doteditor.table-parent{
	overflow: visible !important;
}

#canvas{
	position: absolute;
	top: 0;
	left: 0;
	width: 320px;
	height: 320px;
	z-index: 5;
}

#palette{
	position: absolute;
	top: 370px;
	left: 0;
	z-index: 5;
}

#canvas2{
	position: absolute;
	top: 0;
	left: 0;
	width: 320px;
	height: 320px;
	z-index: 5;
}

#palette2{
	position: absolute;
	top: 330px;
	left: 0;
	z-index: 5;
}

Answer 1

ちょっと必要の無い処理が色々混じっているのでそのあたりも整えながら…

$('td').each(function (i) {
  i = i+1;
  $('.body_' + i)/*.bind('touchstart', function() {
    event.preventDefault();
    this.pageX = event.changedTouches[0].pageX; 
    this.pageY = event.changedTouches[0].pageY;
    pushed = true;
    $('.body_' + i).text(text);
    $('.body_' + i).css({backgroundColor: color});
    return false;
  })
touchmoveイベントのみでOK
*/
.bind('touchmove', function(event) {
    event.preventDefault();                     
    /*this.pageX = event.changedTouches[0].pageX; 
    this.pageY = event.changedTouches[0].pageY;
    changedTouchesが拾え無いのでここでエラーが出ます。（originalEventで取得するためいりません）
    */
    var touch = event.originalEvent.touches[0];
    var target = $(document.elementFromPoint(touch.clientX, touch.clientY));
    /*if (target.hasClass('dot')) $('.body_' + i).text(text);
    if (target.hasClass('dot')) $('.body_' + i).css({backgroundColor: color});
    せっかくtaegetを取得したのに、ここで違う要素にcssを適用してしまっています。
    */
    if (target.hasClass('dot')) target.text(text);
    if (target.hasClass('dot')) target.css({backgroundColor: color});
    //return false; いりません
  }); 
  });

$(document).bind('touchup' , function() { //touchendでは？使ってないからどちらでも良いのかもしれませんが
    pushed = false;
  });

んん…？コメントアウトがうまく反映されませんね…。
テキストエディタかIDEへ貼り付けてご確認いただければと思います。

まとめつつ、自分だったらこうするかな？というコードも書かせていただきます。
（※5/7修正しました）

  $('.dottlanslate td').on('touchmove', function(event) {
    event.preventDefault();  
    var touch = event.originalEvent.touches[0];
    var target = document.elementFromPoint(touch.clientX, touch.clientY);
    if(target){
      var cn = target.classList; // （IE10＋）
      var drawTrg = $(target).hasClass('dot') ? '.'+cn[1] : '.'+cn[0];
      if( !drawTrg.match(/body_|sleeve_/) ) return;
      $(drawTrg).text(text);
      $(drawTrg).css({backgroundColor: color});
    }
  });

• $('.dottlanslate td')に対してtouchmoveイベント（両方のパターンを一つのコードで。$.each(function)も変数iも無くせます）
• event.originalEvent.touches[0]で現在座標を取得し
• document.elementFromPoint(touch.clientX, touch.clientY)で現在座標にある要素を取得→変数targetへ代入
• targetの存在確認で以後の処理を分岐（tableから外へ出たり等targetが取得できないことがあるので）

以後、targetが存在すれば

• target要素のclassを取得し、塗りを適用する要素を、変数drawTrgへ
• document.elementFromPoint()で要素を取得しているので、塗りを適用させたくない要素も取得してしまう。→'.body_'or'.sleeve_'で始まるクラスでなければreturnで処理を行わない。
• drawTrgに代入された要素へcssを適用

という流れです。
結構回りくどい処理になってしまいましたね…。

また、
.bind()でmousedown,touchmove等をそれぞれ分けて書いてらっしゃいますが

$(selector).on({
  'mousedown: function(){
    //mousedown時の処理
  },
  'mouseup': function(){
    //mouseup時の処理
  },
  'touchmove': funtion(){
    //touchmove時の処理
  },
  'touchend':function(){
    //touchend時の処理
  }
});

.on()を使って、まとめて記述することもできます。

Comments

[s-plus-s]

動作しました！ありがとうございます。

ただ
.body_i
にcssを適用しようとしていたのは理由がありまして、片方のtableを塗るともう片方の対応したマスも塗りつぶされる、というものを作っていました。
現在touchmoveは効くようになったのですが、対応したべつのtableはマスが塗りつぶされないという状態です。

説明が足りず申し訳ありません、

とりあえず

if (target.hasClass('dot')) target.text(text);
if (target.hasClass('dot')) target.css({backgroundColor: color});

に
if (target.hasClass('dot')) {target.text(text); $('.body_' + i).text(text);}
if (target.hasClass('dot')) {target.css({backgroundColor: color}); $('.body_' + i).css({backgroundColor: color});}

と追記してみました。
しかしタッチしていない方のtableのbody_iの最初の1マスは塗りつぶされるのですが、他が塗りつぶされません。（タッチした方はなぞっただけ塗りつぶされました。）

if (target.hasClass('.body_' + i)) target.text(text);
if (target.hasClass('.body_' + i)) target.css({backgroundColor: color});　

としてみた場合は、両方のtable共に最初の1マスのみが塗りつぶされるようになりました。

説明が足りず申し訳ありませんでした。何か良い方法はないでしょうか？

[manabufukai]

ああ、なるほど、こちらこそ失礼いたしました。
（ちゃんと読めていませんでした。。）

ええと、ちょっと勘違いをしていたようです。
ちなみに、
・tableによってのdotの有無の違い
・.sleeve_x側はクラスは共通クラス無し
・これらの仕様は変更できるのか？
となっていますが、これらの違いは何でしょう？

これによって、処理の単純化ができるケースと面倒になるケースが分かれるので
お教えいただけると幸いです。

[manabufukai]

すいません、大丈夫でした。
回答の「自分だったらこうするかな？というコード」の箇所を修正しましたので、そちらをご確認ください。
こんな感じでしょうか？

[s-plus-s]

バッチリ動作しました！

「自分だったらこうするかな？」のコード、本当に勉強になりました。
ありがとうございました！

[manabufukai]

Re: s-plus-s さん
恐縮です、無事解決して何よりです。
ただ、（自分で書いておきながら）あんまり綺麗な処理じゃないかもしれません…。
後から後から気になって2,3回ほど直してしまいました…通知が何度も行ってしまっていたなら申し訳ございませんでした。。

Answer 2

スタイルシートのz-index（重なり順）がどうなっているかわかりませんが、touch対象の.body_xが別の要素(#paletteが怪しい)に隠れてしまっていたりしませんか？
touchイベントが発生するのは最前面の要素だけです。

Comments

[s-plus-s]

回答ありがとうございます！
cssを追記しました。

```.body-x```
にz-indexを指定すると（z-indexを効かせるためにpositionを指定すると）tableが崩れてしまうので指定していません。
```#palette```
自体はtableには重ならないように```top:370px```を指定しています。

touchイベントは要素の位置関係にかかわらず
z-indexの値が一番高い要素にのみ発生するという認識でよろしいでしょうか？

[tozjp]

解決済みになっていますが、ご質問いただいているので回答します。

> touchイベントは要素の位置関係にかかわらず
> z-indexの値が一番高い要素にのみ発生するという認識でよろしいでしょうか？

いいえ、タッチとクリックは位置関係が重なっている場合のみ z-index が高い要素に発生します。
タッチ/クリックした座標にある要素の中で一番上でなければいけないということです。

[s-plus-s]

理解できました、回答ありがとうございます！