jQuery拖动对象路线图

1. 使用到的方法：

• parent()，取得一个包含着所有匹配元素的唯一父元素的元素集合。
• offset(), 属于CSS类的方法，返回或设置匹配元素相对于文档的偏移（位置）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。.offset()方法可以让我们重新设置元素的位置。这个元素的位置是相对于document对象的。如果对象原先的position样式属性是 static的话，会被改成relative来实现重定位。
• mouse_event.clientX和mouse_event.clientY可以获得鼠标事件触发时的鼠标坐标相对于窗体的位置。
• 获得当前对象父亲对象类名或id

$(this).parent().attr('class')

 

2. 逻辑 :

mouseover事件 -> mousedown事件 -> 鼠标点位置 -> 计算移动距离 -> 设置移动距离 -> mouseup事件

3. 坑：

• 如果在CSS里面对要移动的对象设置 margin:0 auto;属性，将会影响鼠标的mousedown、mousemove、和mouseup属性的操作。
• mouseup事件最好放在整个body里面并且事件中的解绑mousemove事件的范围应该是mousedown事件中绑定mousemove事件的范围，

        $(this).mouseup(function() {
            console.log('mouse is released');
            $('.box_title').unbind('mousemove');
        });