スマートフォンの横表示には対応していません

Laboratory

なないろ研究所

⼈と⼈をつなぐコミュニケーションをもっと世の中に。
それが私達が⾏うこと。

なないろ研究所では日々、様々なことをリサーチし、実験しています。

コミュニケーションの流通をお手伝いするために、日々様々なリサーチを行い、分析し、時に実験しております。

そんな日々の活動内容においてログをつけております。

このような情報共有が、我々が考えるコミュニケーションの一つの形です。

javascriptでドラッグした距離を取得する関数

こんにちは、なないろフロントエンドプログラマーのTです。

javascriptでドラッグした距離を取得する関数を作りました。

作成した関数


function dragger(selector,func){
    var flag = 0;
    var point = {};
    var dragX,dragY;
    selector.addEventListener("mousedown",function(e){
        e.preventDefault();
        flag = 1;
        point.x = e.x;
        point.y = e.y;
        dragTarget = e.target;
    });
    document.body.addEventListener("mousemove",function(e){
        if(flag == 1){
            e.dragX = e.x - point.x;
            e.dragY = e.y - point.y;
            e.dragTarget = dragTarget;
            func(e);
        }
    });
    //dragcansel
    document.body.addEventListener("mouseup",function(e){
        flag = 0;
    });
    document.body.addEventListener("mouseleave",function(e){
        e.preventDefault();
        flag = 0;
    });
}

使い方

<!--HTML-->

<div class="drag" style=" width: 100%; height: 50px; border: 1px solid #666; background-color: #fff;">drag</div>

//javascript
dragger(document.querySelector(".drag"),function(e){
    e.dragTarget.innerHTML = e.dragX+","+e.dragY+","+e.dragTarget;
})
 
drag

私達は京都でNo1のデザイン力・UI力を目指す

システム開発・Web開発カンパニー

株式会社なないろです。

各種CMS、企業サイト、キャンペーンサイト、顧客管理システム、IoTシステムなど幅広いITソリューションを優良なデザインとUIで、SEOソリューションをあわせてお客様の目標達成を行う企業です。