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

原创 2012年03月31日 08:56:36
/*
* 作者:黑曜石.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>

拖动排序元素jquery插件

  • 2017年08月25日 09:35
  • 6KB
  • 下载

bootstrap中jquery插件——警告框、工具提示框、弹出框、模态框

bootstrap的JavaScript插件中提供了几种形式的提示框。其中就有警告框、工具提示框、弹出框和模态框。下面就来一个一个的看看它们是怎样使用的吧!警告框 它就是这个样子的,点击右侧的小叉子...

超强的jquery极品插件--分页类和提示框弹窗类

分页类+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++   jQuery Pagination j...

原创元素抖动Jquery插件

  • 2013年03月19日 13:28
  • 2KB
  • 下载

轻巧的jQuery提示框插件Tipso演示

轻巧的jQuery提示框插件Tipso演示_dowebok
  • cometwo
  • cometwo
  • 2016年02月24日 20:02
  • 2028

34、jQuery消息提示框插件Tipso

  • 2015年03月26日 14:38
  • 41KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery插件第三十二个:拖动某个元素并通过提示框告知该元素框位置
举报原因:
原因补充:

(最多只允许输入30个字)