大概原理:
使div的position为绝对定位absolute,然后控制其top与left值,需要监听鼠标事件,主要用到mousedown, mousemove, mouseup。
在mousedown后,记录mousedown时鼠标与需要移动的div的位置,然后取得两者之差,得到在鼠标移动后,div的位置。即:
left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值)
top = 当前鼠标位置.y - (鼠标点击时的.y值 - div的初始位置y值)
style【
.goods_main_image_box{
width:600px;
height:400px;
position:absolute;
z-index:100;
background-color:#CCCCCC;
left:350px;
display:none;
}
】
<div class="goods_main_image_box">
$(".goods_main_image_title_line").mousedown(function(down){
$(".goods_main_image_title_line").css("cursor","move");
var is_move=true;
var mouse_down_x=down.pageX-$(".goods_main_image_box").offset().left;
var mouse_down_y=down.pageY-$(".goods_main_image_box").offset().top;
$(document).mousemove(function(move){
if(is_move){
var image_box_x=move.pageX-mouse_down_x;
var image_box_y=move.pageY-mouse_down_y;
$(".goods_main_image_box").css({"left":image_box_x,"top":image_box_y,'opacity':"0.8"})
}
$(".goods_main_image_title_line").mouseup(function(){
$(".goods_main_image_title_line").css("cursor","default");
$(".goods_main_image_box").css("opacity","1");
is_move=false;
});
});//move事件结束
});//mousedown事件结束