新年早々、つまづいていますｗｗｗ 福笑い作成失敗の巻

　どうも！LSSです！！

久々「つまづき」カテゴリの記事になります。

福笑い（未完成）

 

コード

<svg id="svge" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 100 100" style="background-color: lightblue;">
<text x="0" y="95" style="font-size: 100px;">じ</text>
<text x="0" y="20" style="font-size: 20px;" id="j0" draggable="true">へ</text>
<text x="20" y="20" style="font-size: 20px;" id="j1" draggable="true">の</text>
<text x="40" y="20" style="font-size: 20px;" id="j2" draggable="true">へ</text>
<text x="60" y="20" style="font-size: 20px;" id="j3" draggable="true">の</text>
<text x="80" y="20" style="font-size: 20px;" id="j4" draggable="true">も</text>
<text x="0" y="40" style="font-size: 20px;" id="j5" draggable="true">へ</text>
</svg>
<div id="gamen"> </div>
<script>// <![CDATA[
for(i=0;i<7;i++){
document.getElementById("j"+i).addEventListener('drag',dgend,false);
document.getElementById("j"+i).addEventListener('dragend',dgend,false);
document.getElementById("j"+i).addEventListener('touchstart',tcstart,false);
document.getElementById("j"+i).addEventListener('touchmove',tcend,false);
document.getElementById("j"+i).addEventListener('touchend',tcend,false);
}
function dgend(e){
if (window.getSelection) {window.getSelection().removeAllRanges();}
else if (document.selection) {document.selection.empty();}
e.srcElement.parentNode.setAttribute("y",(e.offsetY*100/svge.clientHeight+7).toString());
e.srcElement.parentNode.setAttribute("x",(e.offsetX*100/svge.clientWidth-10).toString());
}
function tcstart(e){
e.preventDefault();
}
function tcend(e){
e.preventDefault();
jx=(e.touches[0].clientX-window.pageXOffset-e.target.getBoundingClientRect().left)*100/svge.clientWidth;
jy=(e.touches[0].clientY-window.pageYOffset-e.target.getBoundingClientRect().top)*100/svge.clientHeight;
if*1{
e.srcElement.setAttribute("y",jy.toString());
e.srcElement.setAttribute("x",jx.toString());
}
}
// ]]></script>

一応、遊べなくはないです

ＰＣ、スマホ、それぞれに難がありますがｗ

ＰＣの場合

「じ」以外の文字、ダブルクリックすると選択状態になり、その上でマウスドラッグする事で位置を変える事ができます。（選択状態にしなきゃなのがいただけない^^;）

スマホの場合

「じ」以外の文字を指で運ぶ事ができます。

が、位置認識が少しおかしい上に、たまに画面外にすっ飛んでいく事があります^^;

SVGでやろうとして撃沈

今回の画面、文字だけですが、「SVG」で描いています。

いくつか作ってて気づいたのは、

• SVG内のテキストも選択できる
• SVG内のテキストにイベントを付与した時、「e.srcElement.parentNode」のように「parentNode」をつける必要がある（文字以外ならここはidで）
• スマホのtouchイベントを扱う際、offsetX、offsetYが使えない

などなど…色々「気づき」はあったものの、完成には至りませんでした^^;

まぁ…文字でやるならSVGにする必要がなく、普通にCSSでやるべきでしたねｗ

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^

*1:jx>0) && (jx<100