2017年11月26日

javascript練習記録3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="id1">id1</div>
    <div id="id2">id2</div>
    <div id="id3">id3</div>
</body>
<style>
    div{
        position:absolute;
        width: 150px;height: 150px;
        left:5px;
        border: 2px solid #000;
    }
    #id1{
        background-color: aqua;
        top:0px;
    }
    #id2{
        background-color:brown;
        top:200px;
    }
    #id3{
        background-color:darkorange;
        top:400px;
    }
</style>
<script>
    var elmar=[];
    var rect;
    var ofsx=0;
    var ofsy=0;
    var id=0;
    function touchst(ev){
        ev.preventDefault();
        rect=this.getBoundingClientRect();
        ofsx=rect.left-ev.touches[0].pageX;
        ofsy=rect.top-ev.touches[0].pageY;
    }
    function touchmv(ev){
        ev.preventDefault();
        this.style.left=ev.touches[0].pageX+ofsx+"px";
        this.style.top=ev.touches[0].pageY+ofsy+"px";
    }
    function touched(ev){
        ofsx=0;
        ofsy=0;
    }
    function setListener(elm){
        elm.addEventListener('touchstart',touchst,false);
        elm.addEventListener('touchmove',touchmv,false);
        elm.addEventListener('touchend',touched,false);
    }
for (var i=0;i<3;i++){
    id=i+1;
    elmar[i]=document.getElementById('id'+id);
    setListener(elmar[i]);
}


</script>
</html>


posted by イエティ at 20:37| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。