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