鼠标拖拽元素

html

<div id="tipBox">
    <div class='head'></div>
    <div class='content'>
        ...
    </div>
</div>

js

var $div = $("#tipBox .head");
/* 鼠标拖拽事件 */
$div.on("mousedown",function(event){
    /* 获取需要拖动节点的坐标 */
    var offset_x = $(this).parent()[0].offsetLeft;//x坐标
    var offset_y = $(this).parent()[0].offsetTop;//y坐标
    /* 获取当前鼠标的坐标 */
    var mouse_x = event.pageX;
    var mouse_y = event.pageY;
    /* 绑定拖动事件 */
    /* 由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素 */
    $(document).on("mousemove",function(ev){
        /* 计算鼠标移动了的位置 */
        var _x = ev.pageX - mouse_x;
        var _y = ev.pageY - mouse_y;
        /* 设置移动后的元素坐标 */
        var now_x = (offset_x + _x +150) + "px";
        var now_y = (offset_y + _y +100) + "px";
        /* 改变目标元素的位置 */
        $div.parent().css({
            top:now_y,
            left:now_x
        });
    });
});
/* 当鼠标左键松开，接触事件绑定 */
$(document).on("mouseup",function(){
    $(this).unbind("mousemove");
});