zoukankan      html  css  js  c++  java
  • 简单的实现JQUERY拖动层

    代码
    <script language="javascript" type="text/javascript">
            $(
    function () {

                $.fn.extend({ moveDiv: 
    function () {
                    
    var Coordinate = function () { };
                    Coordinate.offsetX 
    = 0;
                    Coordinate.offsetY 
    = 0;
                    Coordinate.Obj 
    = this;
                    state 
    = false;
                    $(
    this).mousedown(function (event) {
                        state 
    = true;
                        Coordinate.offsetX 
    = event.offsetX;
                        Coordinate.offsetY 
    = event.offsetY;
                    });
                    $(
    this).mouseup(function () {
                        state 
    = false;
                    });
                    $(
    "body").mousemove(function (event) {
                        
    if (state) {
                            
    var leftP = event.clientX - Coordinate.offsetX;
                            
    var TopP = event.clientY - Coordinate.offsetY;
                            $(Coordinate.Obj).css({ 
    "left": leftP, "top": TopP });
                            $(Coordinate.Obj).html(leftP);
                        }

                    });
                }
                });
                $(
    "#d").moveDiv();
            });
        
    </script>
    <body>
        
    <form id="form1" runat="server">
        
    <div id="d">
        
    </div>
        
    </form>
    </body>

    因为拖拽属于一个组合事件。。所以使用扩展,将这些组合事件定义为一个新的功能。

  • 相关阅读:
    Theme.AppCompat.Light报错
    在Eclipse添加Android兼容包( v4、v7 appcompat )
    如何从Eclipse导入github上的项目源码
    一个C#多线程的工作队列
    是否需要手动执行DataContext的Dispose方法?
    Unity3d 销毁
    Unity3d 碰撞检测
    unity3d 鼠标事件
    Unity3d 刚体
    unity3d 让物体移动到点击位置
  • 原文地址:https://www.cnblogs.com/maydear/p/1777785.html
Copyright © 2011-2022 走看看