flask-map/static/js/moveitem.js

$(function(){		
		//移动窗口，并置顶窗口 [显示红框]
		$(".myMoveItem .moveItem_title").bind("mousedown", function(e1){
			var _this = $(this).parents(".myMoveItem");
			var oldpageX = e1.pageX;
			var oldpageY = e1.pageY;
			var oldLeft = parseInt(_this.css("left"));
			var oldTop = parseInt(_this.css("top"));
			var _clone = _this.clone().empty().css({
					"border": "1px solid red",
					"background": "transparent",
				}).appendTo(_this.parent());
			setMoveItemToppest(_clone); //置顶
			$(document).bind("mousemove.myMoveItem", function(e2){
				_clone.css("left", e2.pageX - oldpageX + oldLeft + "px");
				_clone.css("top", e2.pageY - oldpageY + oldTop + "px");
			});
			$(document).bind("mouseup.myMoveItem", function(e2){
				setMoveItemToppest(_this); //置顶
				_this.css("left", parseInt(_clone.css("left")));
				_this.css("top", parseInt(_clone.css("top")));
				_clone.remove();
				$(document).unbind("mousemove.myMoveItem");
				$(document).unbind("mouseup.myMoveItem");
			});
		});
		
		//移动窗口，并置顶窗口 [不显示红框，直接移动] [使用方法：取消这个注释，然后注释上面那个]
		// $(".myMoveItem .moveItem_title").bind("mousedown", function(e1){
		// 	var _this = $(this).parents(".myMoveItem");
		// 	var oldpageX = e1.pageX;
		// 	var oldpageY = e1.pageY;
		// 	var oldLeft = parseInt(_this.css("left"));
		// 	var oldTop = parseInt(_this.css("top"));
		// 	setMoveItemToppest(_this); //置顶
		// 	$(document).bind("mousemove.myMoveItem", function(e2){
		// 		_this.css("left", e2.pageX - oldpageX + oldLeft + "px");
		// 		_this.css("top", e2.pageY - oldpageY + oldTop + "px");
		// 	});
		// 	$(document).bind("mouseup.myMoveItem", function(e2){
		// 		$(document).unbind("mousemove.myMoveItem");
		// 		$(document).unbind("mouseup.myMoveItem");
		// 	});
		// });
		
		//点击时置顶
		$(".myMoveItem").bind("click", function(){
			setMoveItemToppest($(this));
		});
		
		//置顶窗口方法
		function setMoveItemToppest(_this){
			function sortNumber(a, b) {return a-b;}
			var zIndexArr = [];
			$(document).find(".myMoveItem").each(function(){
				zIndexArr.push(parseInt($(this).css("z-index")));
			});
			zIndexArr.sort(sortNumber);
			_this.css("z-index", zIndexArr[zIndexArr.length-1] + 1);
		}
		
		//右下角改变窗口大小
		$(".myMoveItem .moveItem_resize").bind("mousedown", function(e1){
			var _this = $(this).parents(".myMoveItem");
			var oldpageX = e1.pageX;
			var oldpageY = e1.pageY;
			var oldWidth = parseInt(_this.css("width"));
			var oldHeight = parseInt(_this.css("height"));
			$(document).bind("mousemove.myMoveItem", function(e2){
				if((e2.pageX - oldpageX + oldWidth) > 150 && (e2.pageY - oldpageY + oldHeight) > 150){
					_this.css("width", e2.pageX - oldpageX + oldWidth + "px");
					_this.css("height", e2.pageY - oldpageY + oldHeight + "px");
					// _this.children(".moveItem_body").css("height", "calc(100% - 95px)");
				}
			});
			$(document).bind("mouseup.myMoveItem", function(e2){
				$(document).unbind("mousemove.myMoveItem");
				$(document).unbind("mouseup.myMoveItem");
			});
		});
		
		//关闭按钮
		$(".myMoveItem .moveItem_close").click(function(){
			$(this).parents(".moveItem_header").parent().hide();
		});
		
		//取消按钮
		$(".myMoveItem .moveItem_cancel").click(function(){
			$(this).parents(".moveItem_footer").parent().remove();
		});
		
		//全屏按钮
		$(".moveItem_fullScreen").click(function(e){
			$(this).hide();
			$(this).siblings(".moveItem_normalScreen").attr("css-data", $(this).parents(".moveItem_header").parent().attr("style"));
			$(this).parents(".moveItem_header").parent().css({
				"left":"0",
				"top":"0",
				"height":"100%",
				"width":"100%",
			});
			// $(this).parents(".myMoveItem").children(".moveItem_body").css("height", "calc(100% - 95px)");
			$(this).siblings(".moveItem_normalScreen").show();
		});
		
		//还原按钮
		$(".moveItem_normalScreen").click(function(){
			$(this).parents(".moveItem_header").parent().attr("style", $(this).attr("css-data"));
			$(this).hide();
			$(this).siblings(".moveItem_fullScreen").show();
		});
	});