div框拖动方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.drag
         {
             border: 2px solid #000;
             width: 100px;
             height: 100px;
             cursor: move;
             position: absolute;
             left: 0;
             top: 0;
         }
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function() {
            var _move = false; //移动标记
            var _x, _y; //鼠标离控件左上角的相对位置
            $(".drag").mousedown(function(e) {
                 _move = true;
                 _x = e.pageX - parseInt($(".drag").css("left"));//鼠标在内部位置
                 _y = e.pageY - parseInt($(".drag").css("top"));
                 $(".drag").fadeTo(20, 0.5); //点击后开始拖动并透明显示
                 console.log(\'old:\'+_x,_y);
            });
             $(document).mousemove(function(e) {
                 if (_move) {
                     var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置
                    var y = e.pageY - _y;
                     $(".drag").css({ top: y, left: x }); //控件新位置
                     console.log(\'new:\'+x,y);
                }
             }).mouseup(function() {
                 _move = false;
                 $(".drag").fadeTo("fast", 1); //松开鼠标后停止移动并恢复成不透明
            });
         });</script>
</head>
<body>
<form id="form1" runat="server">
     <div class="drag">div拖拽</div>
</form>
    </body>
</html>

// 栏目拖动实现
            var _move = false;
            var _y,_this,move_block;
            $(\'#phone_index-column tr .icon-move\').on(\'mousedown\',function(e){//点击开始
                _this = $(this).parents(\'.firsttab\');
                pos = _this.offset();
                // 添加移动块且记录位置
                _this.after(\'<tr class="move_block"></tr>\');
                move_block = _this.next(\'.move_block\');
                $(\'.move_block\').css({\'height\':_this.height(),\'background\':\'#AED8DD\',\'border\':\'1px dashed #000\'});
                _this.addClass(\'feild_move\');
                $(\'.feild_move\').css({\'display\':\'block\',\'position\':\'absolute\',\'width\':_this.width(),\'top\':pos.top-140,\'border\':\'1px solid #639cfb\',\'box-shadow\': \'0 0 5px #639cfb\'});
                _move = true;
                _y = e.pageY - parseInt($(\'.feild_move\').css("top"));//鼠标在内部位置
                $(\'.feild_move\').fadeTo(400, 0.5); //点击后开始拖动并透明显示
            }).on(\'mousemove\',function(e) {//移动过程
                var e=event || window.event;
                if (_move) {
                    var y = e.pageY - _y;//移动时根据鼠标位置计算控件左上角的绝对位置
                    var next_top = move_block.next().length===0?\'\':(move_block.next().offset().top - 148);
                    var prev_top = move_block.prev().length===0?\'\':(move_block.prev().prev().offset().top - 148);
                    if(y > next_top){//下移
                        if(move_block.next() != null){
                            move_block.next().after(move_block);
                        }
                    }
                    if(y < prev_top){//上移
                        if(move_block.prev().data(\'aid\') ==_this.data(\'aid\')){
                            move_block.prev().prev().before(move_block);
                        }
                        else{
                            move_block.prev().before(move_block);
                        }
                    }
                    $(\'.feild_move\').css({ \'top\': y }); //控件新位置
                }
             }).on(\'mouseup\',function() {//松开鼠标后
                _move = false;
                $(\'.firsttab\').fadeTo(400, 1);
                _this.removeClass(\'feild_move\');
                var move_prev = move_block.prev();
                move_prev.after(_this);
                _this.css({\'display\':\'\',\'position\':\'\',\'width\':\'\',\'top\':\'\',\'border\':\'\',\'box-shadow\': \'\'});
                $(\'.move_block\').remove();
                // 获取排序信息
                var indexs;
                indexs = $(\'.phone_func .firsttab\').map(function(){
                    return {id:$(this).data(\'aid\'), index:$(this).index()};
                }).toArray();
                $http.post(\'../mhomepage-sortmodify\', {indexlist:indexs}).success(function(json) {
                    // checkJSON(json, function(json){
                   
                    // });
                });
            });//拖动结束