jq拖拽事件

废话不多说贴代码了。

//    jq拖拽横向滑动
    $('.box').on({
            mousedown:function(e){
                var el = $(this);
                var os = el.offset();
                dx = e.pageX - os.left;
                $(document).on('mousemove.drag',function(e){
                    el.offset({
                        left: e.pageX - dx
                    })
                }).on('mouseup',function(e){
                    $(document).off('mousemove.drag');
                })
            }
    })

//    jq拖拽自由拖动
    $(".box").on({
        mousedown: function(e){
            var el=$(this);
            var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
            $(document).on('mousemove.drag', function(e){
                el.offset(
                        {
                            top: e.pageY-dy,
                            left: e.pageX-dx
                        });
            }).on('mouseup',function(e){
                 $(document).off('mousemove.drag');
                 })
        },
    })

“mousemove.drag”是jquery自定义名称，详细请看jq命名空间介绍。贴个链接
http://www.haorooms.com/post/jquery_namespaces_eventname

jq一些实例：http://www.haorooms.com/uploads/example/jscode_shizhan/index.htm