<!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){ // }); }); });//拖动结束