Article Detail

纯生JS图片拖拽

纯生JS图片拖拽 html RunJS [code] css [code]#div1 {width: 100px; height: 100px; backgro...

HTML 阅读 42.7万 8 分钟阅读 2016-01-07 16:22

纯生JS图片拖拽
html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>RunJS</title>
	</head>
	<body>
			<div id="div1"></div>
    <img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" id="img1" />
	</body>
</html>[code]
css
[code]#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#img1 { position: absolute;}

window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var oImg = document.getElementById('img1');
	
	drag(oImg);
	
	drag(oDiv);
	
	function drag(obj) {
		
		obj.onmousedown = function(ev) {
			var ev = ev || event;
			
			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;
			
			
			
			document.onmousemove = function(ev) {
				var ev = ev || event;
				
				obj.style.left = ev.clientX - disX + 'px';
				obj.style.top = ev.clientY - disY + 'px';
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				
			}
			
			return false;
			
		}
		
	}
	
}

原文 http://runjs.cn/detail/nivygth7

js如何给标签添加一个自定义属性

可以用setAttribute来设定
var img = document.getElementsByTagName("img")[0];
img.setAttribute("zidingyi","bcd");

用js给一个DIV一个ID 添加ID

var div = document.getElementsByTagName("div")[0];
div.setAttribute("id","yourdiv");

简单拖曵原理实例

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单拖曵原理实例</title>
    <style type="text/css">
        #drag{width:400px;height:300px;background:url(http://upload.yxgz.cn/uploadfile/2009/0513/20090513052611873.jpg);cursor:move;position:absolute;top:100px;left:100px;border:solid 1px #ccc;}
        h2{color:#fff;background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);color:#FFFFFF;height:40px;line-height:40px;margin:0;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            /*--------------拖曳效果----------------
            *原理：标记拖曳状态dragging ,坐标位置iX, iY
            *         mousedown:fn(){dragging = true, 记录起始坐标位置，设置鼠标捕获}
            *         mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值}
            *         mouseup:fn(){dragging = false, 释放鼠标捕获，防止冒泡}
            */
            var dragging = false;
            var iX, iY;
            $("#drag").mousedown(function(e) {
                dragging = true;
                iX = e.clientX - this.offsetLeft;
                iY = e.clientY - this.offsetTop;
                this.setCapture && this.setCapture();
                return false;
            });
            document.onmousemove = function(e) {
                if (dragging) {
                var e = e || window.event;
                var oX = e.clientX - iX;
                var oY = e.clientY - iY;
                $("#drag").css({"left":oX + "px", "top":oY + "px"});
                return false;
                }
            };
            $(document).mouseup(function(e) {
                dragging = false;
                $("#drag")[0].releaseCapture();
                e.cancelBubble = true;
            })
 
        })
 
    </script>
</head>
 
<body>
    <div id="drag">
        <h2>来拖动我啊</h2>
    </div>
</body>
</html>

js如何禁用鼠标右键

function stop(){
   return false;
  }
  document.oncontextmenu=stop;

Comments 评论区

广西南宁市 2017-09-18 17:25

js拖动窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0}
        #main{
            position: absolute;
            width: 260px;
            height: 260px;
            background: antiquewhite;
            top: 0;
            left: 0;
        }
        #con{
            width: 100%;
            height: 30px;
            background: aquamarine;
            cursor: move;
        }
    </style>
</head>
<body>

<div id='main'>
    <div id='con'>拖动我</div>
</div>
<script>

        function $(id){return document.getElementById(id);}

//        居中浮层
        function aurocenter(el){
//            可视区宽高
            var bodyw=document.documentElement.clientWidth;
            var bodyh=document.documentElement.clientHeight;

            var elw=el.offsetWidth;
            var elh=el.offsetHeight;

            el.style.left=(bodyw-elw)/2+'px';
            el.style.top=(bodyh-elh)/2+'px';
        }


        aurocenter($('main'))
        var offx=0;
        var offy=0;
        var tuodong=false; //判断是否可拖动

//        鼠标按下
        $('con').addEventListener('mousedown',function(ev){
            var ev=ev||window.event;
//            算出点击内容 里面的位置
            offx= ev.pageX-$('main').offsetLeft;
            offy= ev.pageY-$('main').offsetTop;
            tuodong=true;
        })
//        鼠标移动
        document.onmousemove=function(ev){
            var ev=ev||window.event;

//            鼠标当前位置
            var mousex=ev.pageX;
            var mousey=ev.pageY;

            var movex=0;
            var movey=0;

            if (tuodong===true){
//                计算出盒子距离屏幕边缘的距离
                movex=mousex-offx;
                movey=mousey-offy;

//                获取可视区的宽高
                var pagewidth=document.documentElement.clientWidth;
                var pageheight=document.documentElement.clientHeight;

//                获取大盒子的宽高
                var dalogW=$('main').offsetWidth;
                var dalogH=$('main').offsetHeight;

//                算出盒子边缘距离   屏幕边缘的距离
                var maxx=pagewidth-dalogW;
                var maxy=pageheight-dalogH;

//                movex>0   并且 movex<（页面最大宽度 - 浮层的宽度）
                movex=Math.min(maxx, Math.max(0,movex))
                movey=Math.min(maxy, Math.max(0,movey))

//                盒子偏移量
                $('main').style.left=movex+'px';
                $('main').style.top=movey+'px';
            }
        }
//        鼠标松开
        document.onmouseup=function(){
            tuodong=false;
        }

        window.onresize=function(){
            aurocenter($('main'));
        }

</script>
</body>
</html>

#⁰

广西南宁市 2017-09-18 17:26

jq版，鼠标拖拽

<!DOCTYPE html>
<html onselectstart="return false">
<head lang="en" >
    <meta charset="UTF-8">
    <title></title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        #main{
            width: 300px;
            height: 300px;
            left: 50%;
            top: 50%;
            position: absolute;
            background: antiquewhite;
        }
        #main-top{
            width: 300px;
            height: 50px;
            background: #c7cecd;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="main-top">拖拽我</div>
        <div id="main-bottom"></div>
    </div>

    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function(){
            var main=$("#main");
            var box=$('#main-top');
            var offx=0;
            var offy=0;
            var mainw=main.width();
            var mainh=main.height();
            //鼠标按下
            box.mousedown(function(ev){
                var ev=ev||window.event;
                //算出点击内容  里面的位置
                offx=ev.pageX-main.offset().left;
                offy=ev.pageY-main.offset().top;

                //按下过程中
                $(document).bind("mousemove",function(ev){
                    var ev=ev||window.event;
                    //isdraging=true;
                    //当前鼠标的位置
                    var mousex= ev.pageX;
                    var mousey= ev.pageY;

                    //    动态算出盒子距离屏幕边缘的距离
                    var xinx=mousex-offx;
                    var xiny=mousey-offy;

                    //可视区宽高
                    var pagewidth=document.documentElement.clientWidth;
                    var pageheight=document.documentElement.clientHeight;

                    //算出盒子边缘距离屏幕的距离
                    var maxx=pagewidth-mainw;
                    var maxy=pageheight-mainh;

                    //xinx>0   并且 xinx<（页面最大宽度 - 浮层的宽度）
                    //xiny>0   并且 xiny<(页面最大宽度 -浮层的高度)
                    xinx=Math.min(maxx,Math.max(0,xinx));
                    xiny=Math.min(maxy,Math.max(0,xiny));

                    //    盒子的偏移量
                    main.css({left:xinx+"px"})
                    main.css({top:xiny+"px"})
                })
            })
            //抬起
            $(document).mouseup(function(){
                $(this).unbind('mousemove');
            })
        })
    </script>
</body>
</html>

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。