###前提・実現したいこと
jqueryでwordpress上にtableで方眼を作り、マスを塗りつぶすエディタを作っています。
iOS,androidでtouchmoveを動作させ、指でなぞったマス全てを塗りつぶしたいです。
また、違うテーブルの対応したマスも同時に塗りつぶします。
(.body_x またはsleeve_x)
それぞれのtableを塗ると対応した別のテーブルも同時にぬりつぶされる、というイメージです。
###発生している問題・エラーメッセージ
指をスライドさせても最初の1マスしか塗りつぶせません。 PCではクリックで1マスのみ塗る、ドラッグでなぞったマス全てを塗る両方実現できています。
###該当のソースコード
lang
1<div class="doteditor"> 2 <div class="dottlanslate"> 3 <table id="canvas" class="canvas body"></table> 4 </div> 5 <table id="palette"></table> 6</div> 7 8<div class="doteditor"> 9 <div class="dottlanslate"> 10 <table id="canvas3" class="canvas body"></table> 11 </div> 12 <table id="palette"></table> 13</div> 14 15<div class="doteditor"> 16 <div class="dottlanslate"> 17 <table id="canvas2" class="canvas body"></table> 18 </div> 19 <table id="palette"></table> 20</div> 21 22<div class="doteditor"> 23 <div class="dottlanslate"> 24 <table id="canvas4" class="canvas body"></table> 25 </div> 26 <table id="palette"></table> 27</div>
lang
1jQuery(function($) { 2 var isTouch = ('ontouchstart' in window); 3 var pals = ['000', '088', '00d', '438', '800', '888', '8cf', 'aa2', 'b82', 'c18', 'fbb', 'e00', 'fd0', 'feb', 'ddd', 'fff']; 4 var pushed = false; 5 var color = ''; 6 var text = 0; 7 8 var row = '<tr>'; 9 for (i = 0; i < 16; i++) row += '<td> </td>'; 10 row += '</tr>'; 11 12 for (i = 0; i < 16; i++) $('.canvas').append(row); 13 14 $('#canvas td').each(function(i){ 15 $(this).addClass('dot body_' + (i+1)); 16 }); 17 18 $('#canvas3 td').each(function(i){ 19 $(this).addClass('body_' + (i+1)); 20 }); 21 22 $('#canvas2 td').each(function(i){ 23 $(this).addClass('sleeve_' + (i+1)); 24 }); 25 26 $('#canvas4 td').each(function(i){ 27 $(this).addClass('sleeve_' + (i+1)); 28 }); 29 30 $('#canvas5 td').each(function(i){ 31 $(this).addClass('sleeve_' + (i+1)); 32 }); 33 34 35 $('#palette , #palette2').html(row); 36 for (i = 0; i < 16; i++) $('#palette td,#palette2 td').eq(i).css({backgroundColor: '#' + pals[i]}); 37 for (i = 0; i < 16; i++) $('#palette td,#palette2 td').eq(i).text(i); 38 for (i = 0; i < 16; i++) $('#palette2 td').eq(i).css({backgroundColor: '#' + pals[i]}); 39 for (i = 0; i < 16; i++) $('#palette2 td').eq(i).text(i); 40 41 42 $('td').each(function (i) { 43 i = i+1; 44 $('.body_' + i).bind('touchstart', function() { 45 event.preventDefault(); 46 this.pageX = event.changedTouches[0].pageX; 47 this.pageY = event.changedTouches[0].pageY; 48 pushed = true; 49 $('.body_' + i).text(text); 50 $('.body_' + i).css({backgroundColor: color}); 51 return false; 52 }).bind('touchmove', function(event) { 53 event.preventDefault(); 54 this.pageX = event.changedTouches[0].pageX; 55 this.pageY = event.changedTouches[0].pageY; 56 var touch = event.originalEvent.touches[0]; 57 var target = $(document.elementFromPoint(touch.clientX, touch.clientY)); 58 if (target.hasClass('dot')) $('.body_' + i).text(text); 59 if (target.hasClass('dot')) $('.body_' + i).css({backgroundColor: color}); 60 return false; 61 }); 62 }); 63 64 $(document).bind('touchup' , function() { 65 pushed = false; 66 }); 67 68 $('td').each(function (i) { 69 i = i+1; 70 $('.body_' + i).mousedown(function() { 71 pushed = true; 72 $('.body_' + i).text(text); 73 $('.body_' + i).css({backgroundColor: color}); 74 return false; 75 }).mousemove(function() { 76 if (pushed) $('.body_' + i).text(text); 77 if (pushed) $('.body_' + i).css({backgroundColor: color}); 78 return false; 79 }); 80 }); 81 82 83 $('td').each(function (i) { 84 i = i+1; 85 $('.sleeve_' + i).mousedown(function() { 86 pushed = true; 87 $('.sleeve_' + i).text(text); 88 $('.sleeve_' + i).css({backgroundColor: color}); 89 return false; 90 }).mousemove(function() { 91 if (pushed) $('.sleeve_' + i).text(text); 92 if (pushed) $('.sleeve_' + i).css({backgroundColor: color}); 93 return false; 94 }); 95 }); 96 97 $(document).mouseup(function() { 98 pushed = false; 99 }); 100 101 102 103 $('#palette td').click(function() { 104 $(this) 105 .css({borderColor: 'yellow'}) 106 .siblings() 107 .css({borderColor: 'gray'}); 108 color = $(this).css('background-color'); 109 text = $(this).text(); 110 }).eq(0).click(); 111 $('#palette2 td').click(function() { 112 $(this) 113 .css({borderColor: 'yellow'}) 114 .siblings() 115 .css({borderColor: 'gray'}); 116 color = $(this).css('background-color'); 117 text = $(this).text(); 118 }).eq(0).click(); 119 120 121});
lang
1table { 2 border-collapse: collapse; 3 margin-bottom: 16px; 4} 5td { 6 border: 1px solid gray; 7 width: 20px; 8 line-height: 20px; 9 cursor: pointer; 10 font-size: 9px; 11} 12 13.doteditor{ 14 position: relative; 15 width: 370px; 16 height: 400px; 17 z-index: 1; 18} 19 20.dottlanslate{ 21 width: 320px; 22 height: 320px; 23} 24 25.doteditor.table-parent{ 26 overflow: visible !important; 27} 28 29#canvas{ 30 position: absolute; 31 top: 0; 32 left: 0; 33 width: 320px; 34 height: 320px; 35 z-index: 5; 36} 37 38#palette{ 39 position: absolute; 40 top: 370px; 41 left: 0; 42 z-index: 5; 43} 44 45#canvas2{ 46 position: absolute; 47 top: 0; 48 left: 0; 49 width: 320px; 50 height: 320px; 51 z-index: 5; 52} 53 54#palette2{ 55 position: absolute; 56 top: 330px; 57 left: 0; 58 z-index: 5; 59} 60
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/07 11:50
2016/05/07 13:03 編集
2016/05/07 13:38 編集
2016/05/07 16:11
2016/05/07 16:18 編集