自己试着用jquery做出来的,自己测试能用,不=不知道还有什么不对的地方还请大神们看看

来源:8-1 总结

张小颠001

2018-10-24 17:57

$(function(){

var dilog=$('#dilog');

var dilogTitle=$('#dilog_title');

var closeButton=$('.close_button');

var mark=$('#mark');

var showDilog=$('.showDilog');

var current=false;

var moveX;

var moveY;

//自动居中函数

function autoCenter(el){

var elX=($(window).width()-el.width())/2;

var elY=($(window).height()-el.height())/2;

el.css({'left':elX+'px','top':elY+'px'});

}

//覆盖全屏函数

function filltoBody(el){

el.css({'width':'100%','height':'100%'});

}

//鼠标事件1:当鼠标点下去的时候

dilogTitle.on('mousedown',function(e){

var mouseX=e.pageX;

var mouseY=e.pageY;

moveX=mouseX-dilog.offset().left;

moveY=mouseY-dilog.offset().top;

current=true;

})

//鼠标事件2:当鼠标移动的时候

dilogTitle.on('mousemove',function(e){

var nowX=0;

var nowY=0;

if(current===true)

{

var nowX=e.pageX-moveX;

var nowY=e.pageY-moveY;

nowX=Math.min($(window).width()-dilog.width(),Math.max(0,nowX));

nowY=Math.min($(window).height()-dilog.height(),Math.max(0,nowY));

dilog.css({'left':nowX+'px','top':nowY+'px'});

}

})

//鼠标事件3:当鼠标松开的时候

    $(document).on('mouseup',function(){

    current=false;

    })

    

    //点击显示

    showDilog.on('click',function(){

    dilog.css('display','block');

    mark.css('display','block');

    autoCenter(dilog);

    filltoBody(mark);

    })

    

    //关闭按钮

    closeButton.on('click',function(){

    dilog.css('display','none');

    mark.css('display','none');

    })

    

    //窗口变化

    $(window).resize(function(){

    autoCenter(dilog);

    filltoBody(mark);

    })

})


写回答 关注

1回答

  • 慕梦前来
    2021-11-14 13:01:06

    搞好了你这个,弄得不错呀

鼠标拖拽效果

用你的鼠标任意拖拽屏幕上的弹出窗口,了解把元素设置为可拖拽的原理

25993 学习 · 142 问题

查看课程

相似问题