Jquery实现登录拖拽效果

二话不说先贴源码

<script>
//登录框移动,有问题,移动一卡一卡的
     var isMove;
    $(document).ready(function(){
        $("#control-trawaaa").mousedown(function(){
            isMove = true;
            var abs_x = event.pageX - $(‘#layui-layer‘).offset().left;
            var abs_y = event.pageY - $(‘#layui-layer‘).offset().top;
            $(document).mouseover(function(){
                if(isMove){
                    $("#layui-layer").css({‘left‘:event.pageX - abs_x, ‘top‘:event.pageY - abs_y});
                }else{
                    return false;
                }
            });
        });
        $(document).mouseup(function(){
            isMove = false;
        });
    });
</script>

有问题,一卡一卡的。

现在这个

$(document).ready(function() {
    //e鼠标事件
    $("#layui-layer").mousedown(function(e) {
        $(this).css("cursor","move");//改变鼠标指针的形状
        var offset = $(this).offset();//DIV在页面的位置
        var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
        var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离
        //绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 (上一个就是因为没考虑这句话)
        $(document).bind("mousemove",function(ev){
            $("#layui-layer").stop();//加上这个之后
            var _x = ev.pageX - x;//获得X轴方向移动的值
            var _y = ev.pageY - y;//获得Y轴方向移动的值
            $("#layui-layer").animate({left:_x+"px",top:_y+"px"},10);
        });
    });
$(document).mouseup(function() {
        $("#layui-layer").css("cursor","default");
        $(this).unbind("mousemove");
    });
}) 

多谢这位大哥,郁闷了好一会呢 http://www.jb51.net/article/44247.html

时间: 2024-07-29 10:34:07

Jquery实现登录拖拽效果的相关文章

jQuery的DOM操作实例(2)——拖拽效果&amp;&amp;拓展插件

一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

jquery实战——弹出框拖拽效果

今天主要记录一下弹出框拖拽效果: 一.移动弹出窗口的步骤是:按下鼠标左键——移动鼠标——松开鼠标左键停止移动 二.主要思想: 按下鼠标左键:$('div').mousedown(function(e){}) 移动鼠标,获取鼠标当前坐标值:$(document).mousemove(function(e){}) 松开鼠标左键停止移动:$('div').mouseup(function(e){ $(document).unbind('mousemove');  //即当鼠标左键被释放时解除mouse

jquery监听事件on写法以及简单的拖拽效果

引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: $("#haorooms").css("width","100px"); 假如多个属性呢?我们写法如下: $(".demo").css({"height":"100px","ba

jquery鼠标拖拽效果分享

//html代码部分 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/jquery-1.11.1.js"></script> </head> <style> body

WEB前端开发学习----11. JQuery 实现简单的拖拽效果

拖拽效果在网页中很常见.实现起来也不难.记录一下今天实现的简单效果. 拖拽演示 快速拖动时,会出现问题,以后修改. 说白了,就是3个点击事件. 1. 按下鼠标左键, 触发点击事件,此时记录下可以得到鼠标相对于拖动控件的位置(当前鼠标位置-控件位置): 2. 拖动鼠标,触发移动事件,可以计算出鼠标移动的距离(当前鼠标位置-之前算出的相对位置),也就是拖拽控件所移动的距离: 3. 鼠标抬起,结束拖动. 在JQ中,event.pageX    event.pageY可以获取鼠标的位置,相对于文档左上角

jquery插件之拖拽

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可以被拖拽至可视区域以外.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

js实现鼠标的拖拽效果

拖拽效果在我们上网的过程中是很常见的,大家都应该在电脑上面登陆过qq吧,当这个qq的登陆框弹出来的时候,我们是可以进行拖动的.这就是一个拖拽效果 这是我在慕课网上面看到的,我直接拿过来了,地址http://www.imooc.com/learn/60 这个视频讲的蛮好的,一清二楚,不懂的可以去看看. 首先,理清楚一下总体的思路. 第一步:当鼠标按下弹出框某个区域的时候,可以进行拖拽 第二步:弹出框拖拽进行中 第三部:鼠标松开,弹出框拖动到了某个位置. 先上源代码.这个是慕课网的老师提供的 . <

简单的鼠标拖拽效果(原生js实现)

之前在聊天群里看到有人说面试的时候被问到了怎样实现一个拖拽效果,当时看到后在心里默默思考了下,结果发现好像我也写不出来啊.本着遇到一个解决一个的思想,就亲自敲了一个,看到张鑫旭大神写的代码,真的很厉害,多多学习了,(感觉随便搜一个关于前端方面的问题都能看到他的网站,真是太佩服了,写了那么多文章,十分感谢.)好了,接下来就进入正题了.想实现一个效果首先得明白其中的逻辑,知道了实现逻辑后,就可以码代码了.首先我实现的效果是: 鼠标按下后,才可以执行后续效果 鼠标已经按下,然后鼠标移动,需要拖拽的元素

Jquery实现div拖拽

Jquery实现div拖拽 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script type="text/javascript"