鼠标拖拽,给图片打点,显示坐标

核心代码:

function move(){
var x,y;
$('.point').mousedown(function (){
var _num = $(this).text();
$(this).css('z-index','10');
var _w=parseInt($(this).css("width"))/2;
var _h=parseInt($(this).css("height"))/2;
var marginTop = $('.img-box').offset().top;
var marginLeft = $('.img-box').offset().left;
$('.point-list .num'+_num+'').addClass('active').siblings().removeClass('active');
$(this).mousemove(function (event){
var ox=event.clientX-marginLeft;
var oy=event.clientY-marginTop;
var t=oy-_h;
var l=ox-_w;
var w=$('.img-box').width()-$('.point').width();
var h=$('.img-box').height()-$('.point').height();
if(t<0){
t=0;
}
else if(t>h){
t=h;
}
if(l<0){
l=0;
}
else if(l>w){
l=w;
}
x=parseInt(l+parseInt($(this).css('width'))/2);
y=parseInt(t+parseInt($(this).css('height')));
$(this).css({top:t,left:l});

$('.point-list .num'+_num+' .x-num').html(x);
$('.point-list .num'+_num+' .y-num').html(y);
})
});
$('.point').mouseup(function (){
$(this).unbind("mousemove");
$(this).css('z-index','1');
});
}
posted @ 2017-06-22 15:07  段跃  阅读(783)  评论(0编辑  收藏  举报