JQuery - 物件拖移

JQuery - 物件拖移

參考網址。

https://stackoverflow.com/questions/5758090/dragging-a-div-in-jquery-fine-when-mouse-is-slow-but-fails-on-fast-mouse-move

我的客製化,是一個景觀裡面,會有N個不同的視野需要切換,但每個視野都能夠拖動,

所以當切換到不同視野,我的影響物件objContent就會設定為新的視野。

但我不需要視野拖動時,就設為null

這樣我就能處理移動視野的功能

實作:

            var objContent = null;

            var drag = {
                x: 0,
                y: 0,
                status: false
            }

            var delta = {
                x: 0,
                y: 0
            }

            function initView() {
                $('.view').mousedown(function(e) {
                    if(objContent ==null) {
                        drag.state = false
                    } else {
                        if (!drag.state) {
                            drag.x = e.pageX;
                            drag.y = e.pageY;
                            drag.state = true;
                        }
                    }
                    return false;
                });

                $(document).mousemove(function(e) {
                    if (drag.state) {
                        delta.x = e.pageX - drag.x;
                        delta.y = e.pageY - drag.y;

                        var cur_offset = objContent.offset();

                        objContent.offset({
                            left: (cur_offset.left + delta.x),
                            top: (cur_offset.top + delta.y)
                        });

                        drag.x = e.pageX;
                        drag.y = e.pageY;
                    }
                });

                $(document).mouseup(function(){
                    if(drag.state){
                        drag.state = false;
                    }
                });
            }