ドラッグ効果の実現原理分析2

html 5でサポートされているブラウザのドラッグ&ドロップ効果を分析したが、本稿ではライブラリを使用せずにドラッグ&ドロップのプロセスを分析した.
まず、私たちが普段どのように操作しているかを考えてみましょう.大体いくつかのステップに分けることができます.

マウスを押して、マウスを動かして、引きずって、引きずられたものは

について行きます.

マウスを放して、物は停止して、

をドラッグしませんでした

距離、ドラッグ距離(マウス移動)

を計算
対応はイベント上

onmousedown,onmousemove,

ドラッグ開始

onmouseup、ドラッグ

を停止

相対ドラッグ距離

を計算する
次に、このような考え方に従って、タイトルをドラッグすると、この内容が続きます.

まず、タイトルとコンテンツを含むブロック

を書きます.

css ：



#doc{border:1px solid #a0b3d6; background:white;position:absolute; left:150px; top:150px;}

#title{line-height:24px; background:gray; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}

#content{width:320px; height:150px;}

html:

<div id="doc">

<div id="title">  </div>

<div id="content">

　　  ……

</div>

</div>

まずドラッグするとき、ドラッグするオブジェクトの画面の上と下に対する距離を計算します.
　　top = target.top;
　　left = target.left;
onmousedownイベントを書きます.これはドラッグ可能なオブジェクトです.
　　title.onmousedown  = function(event){
　　　　event = event||window.event;
//IEの文字が選択されないようにする
　　　　this.unselectstart = function(){
　　　　　　return false;
　　　　};
//記録開始位置
　　　　curX = event.pageX ? event.pageX :event.clientX  +document.body.scrollLeft||document.documentElement.scrollLeft;
　　　　curY = event.pageY ? event.pageY :event.clientY  +document.body.scrollTop||document.documentElement.scrollTop;　　　
　　}
ドキュメント内で移動するonmousemoveイベントを書きます.documentに追加する必要があります.
　　document.onmousemove  = function(event){
　　　　event = event||window.event;
　　　　var nowX = event.pageX ? event.pageX :event.clientX  +document.body.scrollLeft||document.documentElement.scrollLeft,
　　　　　　nowY = event.pageY ? event.pageY :event.clientY  +document.body.scrollTop||document.documentElement.scrollTop;
　　　　var disX = nowX - curX,
　　　　　　disY = nowY - curY;
　　　　target.style.top  = top +disY;
　　　　target.style.left =  left +disX;
onmouseupイベントを書くのは、これもドキュメントにあるので、documentにつけましょう.
　　document.onmouseup = function(event){
　　　　event = event||window.event;
　　　　left = target.left;
　　　　top = target.top;
　　}
完全なコードは次のとおりです.

var params = {
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false
};
//    CSS  
var getCss = function(o,key){
    return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];     
};

var startDrag = function(title, target){

    params.left = getCss(target, "left");
    params.top = getCss(target, "top");

    title.onmousedown = function(event){
        event = event||window.event;
        bar.onselectstart = function(){
                return false;
        } 
        params.flag = true;
        params.currentX =  event.pageX ? event.pageX :event.clientX  +document.body.scrollLeft||document.documentElement.scrollLeft,
        params.currentY = event.pageY ? event.pageY :event.clientY  +document.body.scrollTop||document.documentElement.scrollTop;
    };
    document.onmouseup = function(){
        params.flag = false;    
        params.left = getCss(target, "left");
        params.top = getCss(target, "top");
    };
    document.onmousemove = function(event){
        event  = event ||window.event;
        if(params.flag){
            var nowX = event.pageX ? event.pageX :event.clientX  +document.body.scrollLeft||document.documentElement.scrollLeft,
                nowY = event.pageY ? event.pageY :event.clientY  +document.body.scrollTop||document.documentElement.scrollTop;
            var disX = nowX - params.currentX,
                disY = nowY - params.currentY;
            target.style.left = parseInt(params.left) + disX + "px";
            target.style.top = parseInt(params.top) + disY + "px";
        }
    }    
};

本文が終わる.