JQuery插件第三十二个：拖动某个元素并通过提示框告知该元素框位置

最新推荐文章于 2024-09-20 16:06:21 发布

chinet_bridge

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量793

点赞数

分类专栏：拖动文章标签： jquery插件 function distance xhtml up jquery

本文链接：https://blog.csdn.net/chinet_bridge/article/details/7414139

版权

拖动专栏收录该内容

2 篇文章 0 订阅

订阅专栏

/*
* 作者：黑曜石.C 2010-04-22
* 版权没有，随便使用！
* 改编：chinet_bridge 2012-02-22
*/
(function ($) {
    $.fn.dragTip = function (options) {
        var defaults = {
            opacity: 0.6
        };
        var opts = $.extend(defaults, options);
		//主要执行过程		        
        this.each(function(){
            var obj=$(this);	                  
            //add css to the dBox
            function addCSS() {
                obj.css({"position":"absolute","left": obj.offset().left, "top": obj.offset().top});
            }
		//位置框位置
		var tiPos = function(){
			T = obj.offset().top;
			L = obj.offset().left;
			var pt=$("#posTitle");
			pt.css({"top":parseInt(T) - 22 + "px",
			"left": parseInt(L) +obj.width() + "px",
			"display":"block"
			}).text("top:"+T+"px, left:"+L+"px");
		}
		//添加位置框样式
		$("body").append("<style> #posTitle{display:none; height:22px; width:36px; position:absolute;border:1px solid #aaa;'}</style><div id='posTitle' ></div>")

        //drag the dBox
        //this event contains four events(handle.mousedown,move,out,up)
        function _drag() {
            var dx, dy, moveout;
            var handle = obj.find("*").css('cursor', 'move');
            handle.mousedown(function (e) {
                //cal the distance between e and dBox
                dx = e.clientX - parseInt(obj.css("left"));
                dy = e.clientY - parseInt(obj.css("top"));
                //bind mousemove event and mouseout event to the dBox
                obj.mousemove(move).mouseout(out).css({ "opacity": opts.opacity });
                handle.mouseup(up);
            });
            move = function (e) {
                moveout = false;
                win = $(window);
                var x, y;
                if (e.clientX - dx < 0) {
                    x = 0;
                } else {
                    if (e.clientX - dx > (win.width() - obj.width())) {
                        x = win.width() - obj.width();
                    } else {
                        x = e.clientX - dx;
                    }
                }
                if (e.clientY - dy < 0) {
                    y = 0;
                } else {
                    y = e.clientY - dy;
                }
                obj.css({
                    left: x,
                    top: y
                });
                tiPos();
            }
            out = function (e) {
                moveout = true;
                setTimeout(function () {
                    moveout && up(e);
                }, 10);
            }
            up = function (e) {
                obj.unbind("mousemove", move).unbind("mouseout", out).css("opacity", 1);
                handle.unbind("mouseup", up);
            }
        }
        addCSS();
        _drag();
        });			
    };
})(jQuery);

拖动某个元素并通过提示框告知该元素框位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../jquery-1.6.js"></script>
    <script type="text/javascript" src="jQuery.dragTip.js" charset="utf-8" ></script>
    <script type="text/javascript">
        $(function () {
            $("#dbox4").dragTip();
        });
    </script>
</head>
<body>
    <div id="dbox4" style="height: 60px; width:50px; background-color:Aqua;" >
    <div>改编自黑耀石.C的拖动特效</div>    
    <input type="button" id="dbox3" value="拖动" />
    </div>
</body>
</html>