jQueryはマウスドラッグイベントを実現

1、ドラッグする要素を設定し、スタイルを設定する

        
linux
        
java
        
javascript
    

*{
            margin:0;
            padding:0;
        }
        ul{
            list-style: none;
            background-color: grey;
            color:white;
            width:65px;
            height:70px;
            padding:10px;
            position: absolute;
        }

2、現在の要素にマウスポイントダウンイベントをバインドする
マウスのクリック位置と要素の左上隅からの相対位置を計算し、documentオブジェクトにマウスの移動イベントをバインドします.マウスが移動すると、その要素をマウスの位置に移動させ、最後にdocumentオブジェクトにマウスの離しイベントをバインドします.マウスの移動イベントとマウスの離しイベントjsコードは次のようになります.

$('ul').mousedown(function(event){
            deltax = event.clientX - $(this).offset().left
            deltay = event.clientY - $(this).offset().top
            $(document).bind('mousemove',start)
            $(document).bind('mouseup',end)
            return false
        })
        function start(event){
                x = event.clientX - deltax
                y = event.clientY - deltay
                $('ul').css({'left':x+'px','top':y+'px'})
                return false
        }
        function end(event){
            $(this).unbind('mousemove')
            $(this).unbind('mouseup')
        }

2つのreturn falseはデフォルトのイベントを削除するために、削除すると問題が発生します.