js 图片的拖动

浏览数：48 / 时间：2015年06月09日

 $(".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 图片的拖动