javascript完美拖拽的落到实处格局,JavaScript完毕文

作者: 计算机网络  发布:2019-09-06

本文实例陈说了JavaScript完结文字与图片拖拽效果的措施。分享给我们供大家参考。具体落真实景况势如下:

HTML代码:

复制代码 代码如下:

复制代码 代码如下:

<html>
<head>
<title>JavaScript完成文字与图片的拖拽效果</title>
<style type="text/css">
*{padding:0;margin:0;}
.tips{position:absolute;background:#eee;}
</style>
</head>
<body>
<div class="tips" id="tips1" onmouseover="dragF.drag('tips1');">
<img src="/images/skinslogo.gif"><br>图片能够拖动</div>
<div class="tips" id="tips2" onmouseover="dragF.drag('tips2');"><a href="//www.jb51.net" target="_blank">脚本之家</a><br />拖动链接也能够
</div>
</body>
<script type="text/javascript">
var $id=function(id){return document.getElementById(id);}
var dragF={
 locked:false,
 lastObj:undefined,
 drag:function(obj){
  $id(obj).onmousedown=function(e){
   var e = e ? e : window.event;
   if(!window.event) {e.preventDefault();}/* 阻止标记<a href='/site/js-5791-1.html' target='_blank'><u>浏览器</u></a>下拖动a,img的私下认可事件 */
   dragF.locked=true;
     $id(obj).style.position="absolute";
   $id(obj).style.zIndex="100";
   if (dragF.lastObj&&dragF.lastObj!=$id(obj)) {/* 多成分拖动须要还原上次成分状态 */
    dragF.lastObj.style.zIndex = "1";
   }
   dragF.lastObj=$id(obj);
   var tempX=$id(obj).offsetLeft;
   var tempY=$id(obj).offsetTop;
   dragF.x=e.clientX;
   dragF.y=e.clientY;
   document.onmousemove=function(e){
    var e = e ? e : window.event;
    if(dragF.locked==false) return false;
    $id(obj).style.left=tempX+e.clientX-dragF.x+"px";
    $id(obj).style.top=tempY+e.clientY-dragF.y+"px";
    if(window.event) {e.returnValue=false;}/* 阻止ie下a,img的暗许事件 */
   }
   document.onmouseup=function(){
    dragF.locked=false;
   }
  }
 }
}
</script>
</html>

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="drag.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
    <div id="login">
        <h2>网址登入</h2>
        <div class="user">
            用户名:<input type="text" name="user" class="txt" />
        </div>
        <div class="pass">
            密 码:<input type="password" name="pass" class="txt" />
        </div>
        <div class="submit">
            <input type="submit" value="登录" class="button" />
        </div>
    </div>
</body>
</html>

可望本文所述对大家的javascript程序设计具备帮忙。

CSS代码:

你或者感兴趣的稿子:

  • JavaScript 图片放大镜(可拖放、缩放效果)
  • js完成图片拖动退换各样附图
  • js实现应用鼠标拖拽切换图片的艺术
  • js达成图片放大和拖拽特效代码分享
  • js实现鼠标拖动图片并包容IE/FF火狐/Google等主流浏览器
  • javascript 网页编辑框及拖拽图片的难题
  • 原生JS完结拖拽图片效果
  • JS HTML5拖拽上传图片预览
  • JS完成放大、收缩及拖拽图片的方法【可包容IE、火狐】
  • JavaScript落到实处图片拖曳效果

复制代码 代码如下:

body, h2 {
    margin:0;
    padding:0;
}
#login {
    width:350px;
    height:250px;
    border:1px solid #ccc;
    position:absolute;
    left:512px;
    top:300px;
}
#login h2 {
    font-size:14px;
    text-align:center;
    height:30px;
    line-height:30px;
    background:#f60;
    color:white;
    cursor:move;
    margin-bottom:30px;
    letter-spacing:1px;
}
#login .user, #login .pass {
    text-align:center;
    font-size:12px;
    height:60px;
    line-height:40px;
}
#login .txt {
    width:200px;
    border:1px solid #ccc;
    background:#fff;
    height:30px;
    line-height:30px;
}
#login .submit {
    text-align:right;
}
#login .button {
    width:100px;
    height:30px;
    background:#06f;
    border:none;
    cursor:pointer;
    margin:10px 30px;
    color:white;
    letter-spacing:1px;
    font-weight:bold;
}

拖拽核心代码:

复制代码 代码如下:

function drag(obj) {
    if (typeof obj === 'string') {
        var obj = document.getElementById(obj);
    } else {
        var obj = obj;
    }
    function fixEvent(event) {
        event.target = event.srcElement;
        event.preventDefault = fixEvent.preventDefault;
        return event;
    }
    fixEvent.preventDefault = function () {
        this.returnValue = false;
    };
    obj.onmousedown = mousedown;
    function mousedown(e) {
        var e = e || fixEvent(window.event);
        var disX = e.clientX - obj.offsetLeft;
        var disY = e.clientY - obj.offsetTop;
        if (e.target.tagName === 'H2') {
            document.onmousemove = move;
            document.onmouseup = up;
        } else {
            document.onmousemove = null;
            document.onmouseup = null;           
        }
        function move(e) {
            var e = e || fixEvent(window.event);
            var left = e.clientX - disX;
            var top = e.clientY - disY;
            if (obj.setCapture) {
                obj.setCapture();
            }
            if (left < 0) {
                left = 0;
            } else if (left > document.documentElement.clientWidth - obj.offsetWidth) {
                left = document.documentElement.clientWidth - obj.offsetWidth;
            }
            if (top < 0) {
                top = 0;
            } else if (top > document.documentElement.clientHeight - obj.offsetHeight) {
                top = document.documentElement.clientHeight - obj.offsetHeight;
            }
            obj.style.left = left + 'px';
            obj.style.top = top + 'px';
            return false;
        };
        function up() {
            if (obj.releaseCapture) {
                obj.releaseCapture();
            }
            document.onmousemove = null;
            document.onmouseup = null;
        }
    };
}

调用代码:

复制代码 代码如下:

window.onload = function () {
    var login = document.getElementById('login');
    drag(login);
};

款待商讨指正!!!

您只怕感兴趣的篇章:

  • javascript 图片放大功能函数
  • 八个轻便的javascript图片放大功效代码
  • javascript 图片放大降低功效完结代码
  • JavaScript图片放大技能(放大镜)完成代码分享
  • 原生javascript完结DIV拖拽并总结重复面积
  • Javascript 拖拽的局地简约的施用(逐行深入分析代码,令你轻便了拖拽的规律)
  • JavaScript落实文字与图片拖拽效果的点子
  • javascript贯彻了照片拖拽点击置顶的肖像墙代码
  • javascript落成完美拖拽效果
  • JavaScript贯彻的简易拖拽效果
  • JavaScript兑现可拖拽的拖动层Div实例
  • js完毕图片放大和拖拽特效代码分享

本文由今晚开什么码发布于计算机网络,转载请注明出处:javascript完美拖拽的落到实处格局,JavaScript完毕文

关键词:

上一篇:办法分析
下一篇:没有了