zoukankan      html  css  js  c++  java
  • 打印时鼠标键盘移动的div创建

    function createDiv(id, label, offset_left, offset_top)
    {
        $("body").append($("<div></div>").attr("id", id).text(label));
        
        $("#" + id).css({"position":"absolute", "cursor":"move", "border": "1px dotted #000000", "font-size":"12px"});
        $("#" + id).offset({left:offset_left, top:offset_top});
        
        $("#" + id).mousedown(function(event){ 
            divId = $(event.target).attr("id");
            $("div").css("background", "#FFFFFF");
            $("#" + divId).css("background", "#eeeeee");
            
            var offset=$("#" + divId).offset();   
            x1=event.clientX-offset.left;   
            y1=event.clientY-offset.top; 
            
            $(document).mousemove(function(event){
                if(!isNaN(event.clientX) && !isNaN(event.clientY)) {
                   $("#" + divId).css("left",(event.clientX-x1)+"px");   
                   $("#" + divId).css("top",(event.clientY-y1)+"px");   
                } 
            });   
            $("#" + divId).mouseup(function(event){   
               $(document).unbind("mousemove");
            });   
        });
        
        $(document).keydown(function(event){
            
            var keyCodeValue = event.keyCode;
            var offsetValue = $("#" + divId).offset();
            
            if(keyCodeValue == 46) {
                if(divId != "") {
                    $("#" + divId).remove();
                }
            }
            
            switch(keyCodeValue)
            {
                case 37 : $("#" + divId).offset({left:(offsetValue.left - 1)});
                break;
                case 38 : $("#" + divId).offset({top:(offsetValue.top - 1)});
                break;
                case 39 : $("#" + divId).offset({left:(offsetValue.left + 1)});
                break;
                case 40 : $("#" + divId).offset({top:(offsetValue.top + 1)}); 
                break;
            }
        });
    }
    我很小我很弱,我在慢慢成长!
  • 相关阅读:
    进程间通信:命名管道FIFO(2)
    进程间通信:管道(1)
    POSIX线程学习
    进程与信号学习
    堆栈的区别与联系
    浅读《构建之法:现代软件工程》有感
    CSS学习成长记
    jquery学习成长记(一)
    html学习成长记
    Razor视图
  • 原文地址:https://www.cnblogs.com/lvzhanhui/p/xiaoqiaolv.html
Copyright © 2011-2022 走看看