jquery 拖动图层

最新推荐文章于 2022-06-27 17:39:17 发布

crowxiao

最新推荐文章于 2022-06-27 17:39:17 发布

阅读量2.1k

点赞数

文章标签： jquery function border null javascript div

本文链接：https://blog.csdn.net/JIAYOUXIAOYI/article/details/4720491

版权

<html>
<head>
<title>test </title>
<script src=    "daqi.core.js"        ></script>
<script src=    "daqi.util.tool.js"        ></script>
<script src=    "daqix.thirdparty.jquery.jquery1.3.2.js"        ></script>
<script src=    "daqix.thirdparty.jquery.js"        ></script>
<script src=    "daqix.controller.abstract.drag.js"        ></script>
<script language="javascript">

    daqix.thirdparty.jquery.JQuery(document).ready(function(){
        var $=daqix.thirdparty.jquery.JQuery;
        var Drag=daqix.controller.abstractx.Drag;

        new Drag($("#a").get(0));
        new Drag($("#b").get(0));
        new Drag($("#c").get(0));
    });
</script>
</head>
<body>
<div id="a" style="position:absolute;left:20;top:190;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">Layer 1</div>
<div id="b" style="position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2</div>
<div id="c" style="position:absolute;left:100;top:90;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3</div>
</body>
</html>

$("daqix.controller.abstractx","Drag",function(){

    //imports
    var $=daqix.thirdparty.jquery.JQuery;
    var $$=daqi.core.SuperClass;
    this.x=null;
    this.y=null;
    this.z=null;

    //propertis

    //methods
    this.init=function(element){
        this.element=element;
        var $element=$(element);
    $element.bind("mouseup",this,this.stopdrag);
        $element.bind("mousedown",this,this.startdrag);
        $element.bind("mousemove",this,this.movedrag);
        this.element._instance=this;
    };

    this.startdrag=function(event){
            var inst=event.data;
            inst.element.setCapture();
            inst.z=$(inst.element).css("zIndex");
            $(inst.element).css("zIndex","100");
            inst.x=event.pageX;
            inst.y=event.pageY;

    }

    this.movedrag=function(event){
        var inst=event.data;
            if(event.button==1&&event.target==inst.element){
                $(inst.element).css("left",$(inst.element).offset().left+(event.pageX-inst.x));
                $(inst.element).css("top",$(inst.element).offset().top+(event.pageY-inst.y));
                inst.x=event.pageX;
                inst.y=event.pageY;
            }
    }

    this.stopdrag=function(event){
            var inst=event.data;
            $(inst.element).css("zIndex",inst.z);
            inst.element.releaseCapture();
            event.stopPropagation();
    }
});
$e(daqix.controller.abstractx.Drag,{
    selector:null
});

crowxiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 拖动图层

test daqix.thirdparty.jquery.JQuery(document).ready(function(){ var $=daqix.thirdparty.jquery.JQuery; var Drag=daqix.controller.abstractx.Drag;
复制链接

扫一扫