码迷,mamicode.com
首页 > Web开发 > 详细

js 图片的拖动

时间:2015-01-26 11:31:36      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:

 $(".photowall li").css({"position":"absolute"})
        /*+++++ 拖曳效果 ++++++
         *原理:标记拖曳状态dragging,坐标位置iX、iY
         *   mousedown:fn(){dragging = true:记录起始坐标位置,设置鼠标捕获}
         *   mouseover:fn(){判断如果dragging = true,则当前坐标位置 - 记录起始坐标位置,绝对定位的元素获得差值}
         *   mouseup:fn(){dragging = false:释放鼠标捕获,防止冒泡}
         */
        var dragging = false;
        var iX, iY;
        var a;
        $(".photowall li").mousedown(function(e) {
            dragging = true;
            iX = e.clientX - this.offsetLeft;
            iY = e.clientY - this.offsetTop;
            a=$(this);
            var length=$(this).nextAll().length;
            for(var i=1;i<=length;i++){
                $(this).next().after(this);
            }
            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;
                a.css({"left":oX + "px", "top":oY + "px"});
                return false;
            }
        };
        $(document).mouseup(function(e) {
            dragging = false;
            a[0].releaseCapture();
            e.cancelBubble = true;
        })

  找了好久。还是记下来好~

js 图片的拖动

标签:

原文地址:http://www.cnblogs.com/zqxzs/p/4249588.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!