html模块拖拽功能

最新推荐文章于 2023-07-25 15:37:09 发布
最新推荐文章于 2023-07-25 15:37:09 发布
阅读量3.3k 收藏 2
点赞数
分类专栏： html 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kevin_Luan/article/details/46390463
版权

 实现html模块拖拽功能   如下图


<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style type="text/css">
body{
	margin-top: 0px;
}

DIV.dragHeader {
	width: 100%;
	height: 20px;
	line-height: 20px;
	background-color: #8FACBC; /*模块标题背景颜色 */
	color: #FFFFFF;
}

DIV.dragLayer {
	/*border: 1px solid #120945;*/
	margin-bottom: 10px;
	/*width: 100%;*/
	margin: auto;
}

DIV.dragLayer_over { /*拖动时内容区域样式*/
	border: 1px solid #dce9ff;
	/*background-color: #FFFFFF;*/
	width: 400px;
	filter: alpha(opacity = 80);
	-moz-opacity: 0.8; /* Moz + FF */
	opacity: 0.8; /*支持CSS3的浏览器（FF 1.5也支持）*/
	margin-top: 0px; /*拖动时拖动DIV距离鼠标的位置*/
}

DIV.clone_dragLayer_over {
	border: 1px dashed #dce9ff;
	/*background-color: #FFF;*/
	filter: alpha(opacity =80);
	-moz-opacity: 0.8; /*Moz + FF*/
	opacity: 0.8; /*支持CSS3的浏览器（FF 1.5也支持）*/
	/*margin-bottom: 10px;*/
	/*margin-top: 50px;*/
}

DIV.dragHeader_over { /*拖动时title*/
	width: 400px;
	height: 20px;
	line-height: 20px;
	background-color: #1c7cb8;
	margin-top: 0px;
}

SPAN.min, SPAN.close {
	cursor: pointer;
	font-family: Webdings
}

#container {
	width: 80%;
	margin: auto;
} /*DIV距离边的距离*/
#leftContainer {
	float: left;
	width: 400px;
	margin: 0px 1px;
	background-color: aliceblue;
	min-height: 100px;
	overflow: inherit;
}

#rightContainer {
	float: left;
	width: 400px;
	margin: 0px 0px;
	background-color: aliceblue;
	min-height: 100px;
	overflow: initial;
}

DIV.content {
	width: 100%;
	padding: 4px
}

.btn {
	border: 1px thin #ddd;
	width: 100px;
	height: 30px
}

header {
	background-color: #1c7cb8;
	text-align: center;
	font-size: 20px;
}
</style>
<script type="text/javascript">
	var drag_val = ""; //将cookie值赋给JS

	var XMLHttpReq;
	//创建XMLHttpRequest对象       
	function createXMLHttpRequest() {

		if (window.XMLHttpRequest) { //Mozilla 浏览器
			XMLHttpReq = new XMLHttpRequest();
		} else if (window.ActiveXObject) { // IE浏览器
			try {
				XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
				}
			}
		}
	}
	//----------------------------------
	var Drag = {
		obj : null, //目标对象
		cloneobj : null, //拖动对象
		container : null, //容器
		dragged : false, //拖动标志
		shadow : null, //阴影

		data : {},
		init : function(id) {
			Drag.container = $(id);
            drag_val = Drag.read("drag_val");
			if (drag_val) {
				var dragObj = JSON.parse(drag_val);
				if (dragObj.rightContainer) {
					var modules = dragObj.rightContainer;
					for (var i = 0; i < modules.length; i++) {
						$("rightContainer").appendChild($(modules));
					}
				}
				if (dragObj.leftContainer) {
					var modules = dragObj.leftContainer;
					for (var i = 0; i < modules.length; i++) {
						$("leftContainer").appendChild($(modules));
					}
				}
			}
			//			if (drag_val) {//读取cookie
			//
			//                for(var proc in dragObj){
			//                    for(var i=0;i<proc.length;i++){
			//
			//                    }
			//                }
			//				var subcontainer = drag_val.split("|");
			//				alert(subcontainer);
			//				for (var i = 0; i < subcontainer.length; i++) {
			//					var subcontainerItem = subcontainer[i].split(":");
			//					if ($(subcontainerItem[0])) {
			//						var items = subcontainerItem[1].split(",");
			//						for (var j = 0; j < items.length; j++) {
			//							if ($(items[j]))
			//								$(subcontainerItem[0]).appendChild($(items[j]));
			//						}
			//					}
			//				}
			//			}
			cleanWhitespace(Drag.container)//清除空白节点
			var collection = Drag.container.getElementsByTagName("DIV");
			for (var i = 0; i < collection.length; i++) {
				if (collection[i].className == "dragLayer") {
					var o = collection[i].firstChild;
					SavedObject.push([ o.parentNode.id, 1,
							o.parentNode.style.height ]);
					o.onmousedown = Drag.start;
				}
			}
			document.onmousemove = Drag.drag;
			document.onmouseup = Drag.end;

			Drag.buildData();
		},

		start : function(e) {
			if (!e)
				e = window.event;
			var obj = getTarget(e);
			if (obj.className == "min") {
				Drag.min(e);
				return;
			} else if (obj.className == "close") {
				Drag.close(e);
				return;
			} else {
				if (obj.className != "dragHeader")
					obj = obj.parentNode;
			}
			Drag.dragged = true;
			Drag.obj = obj.parentNode;
			Drag.cloneobj = Drag.obj.cloneNode(true);
			document.body.appendChild(Drag.cloneobj);
			Drag.shadow = document.createElement("DIV");
			document.body.appendChild(Drag.shadow);
			with (Drag.cloneobj.style) {
				position = "absolute";
				zIndex = 1000;
				left = getRealLeft(Drag.obj) + "px";
				top = getRealTop(Drag.obj) + "px";
			}
			with (Drag.shadow.style) {
				position = "absolute";
				zIndex = 999;
				left = getRealLeft(Drag.obj) + 4 + "px";
				top = getRealTop(Drag.obj) + 4 + "px";
				width = Drag.obj.offsetWidth + "px";
				height = Drag.obj.offsetHeight + "px";
//				backgroundColor = "#FFF"; //拖动过程中的背景色
				if (navigator.userAgent.indexOf("Gecko") != -1)
					MozOpacity = "0.5";
				else if (navigator.userAgent.indexOf("MSIE") != -1)
					filter = "alpha(opacity=50)";
			}

			Drag.cloneobj.initMouseX = getMouseX(e);
			Drag.cloneobj.initMouseY = getMouseY(e);
			Drag.cloneobj.initoffsetL = getRealLeft(Drag.obj);
			Drag.cloneobj.initoffsetY = getRealTop(Drag.obj);
			//change style
			Drag.cloneobj.firstChild.className = "dragHeader_over";
			Drag.cloneobj.className = "dragLayer_over";
			Drag.obj.className = "clone_dragLayer_over";
		},

		drag : function(e) {
			if (!Drag.dragged || Drag.obj == null)
				return;
			if (!e)
				e = window.event;
			var currenX = getMouseX(e);
			var currenY = getMouseY(e);

			if (Drag.cloneobj.initoffsetL + currenX
					- Drag.cloneobj.initMouseX > getRealLeft(Drag.container))
				Drag.cloneobj.style.left = (Drag.cloneobj.initoffsetL
						+ currenX - Drag.cloneobj.initMouseX)
						+ "px";
			else
				Drag.cloneobj.style.left = getRealLeft(Drag.container)
						+ "px";
			if (Drag.cloneobj.initoffsetY + currenY
					- Drag.cloneobj.initMouseY > getRealTop(Drag.container))
				Drag.cloneobj.style.top = (Drag.cloneobj.initoffsetY
						+ currenY - Drag.cloneobj.initMouseY)
						+ "px";
			else
				Drag.cloneobj.style.top = getRealTop(Drag.container)
						+ "px";

			var collection = Drag.container.getElementsByTagName("DIV");
			var finded = false;
			for (var i = 0; i < collection.length; i++) {
				var o = collection[i];
				if (o.className == "dragLayer") {
					if (((getRealLeft(o) <= Drag.cloneobj.offsetLeft && getRealLeft(o)
							+ o.offsetWidth >= Drag.cloneobj.offsetLeft) || (getRealLeft(o) <= Drag.cloneobj.offsetLeft
							+ Drag.cloneobj.offsetWidth && getRealLeft(o)
							+ o.offsetWidth >= Drag.cloneobj.offsetLeft
							+ Drag.cloneobj.offsetWidth))
							&& getRealTop(o) <= Drag.cloneobj.offsetTop
							&& getRealTop(o) + o.offsetHeight >= Drag.cloneobj.offsetTop) {
						//window.status = getRealTop(o.parentNode)+"|"+(Drag.cloneobj.offsetTop - 8);
						if (getRealTop(o.parentNode) >= Drag.cloneobj.offsetTop - 8) {
							o.parentNode.insertBefore(Drag.obj, o);
						} else {
							if (o.nextSibling)
								o.parentNode.insertBefore(Drag.obj,
										o.nextSibling);
							else
								o.parentNode.appendChild(Drag.obj);
						}
						finded = true;
						break;
					}
				}
			}

			if (!finded) {
				for (var i = 0; i < Drag.container.childNodes.length; i++) {
					var o = Drag.container.childNodes[i];
					if (getRealLeft(o) <= Drag.cloneobj.offsetLeft
							&& getRealLeft(o) + o.offsetWidth >= Drag.cloneobj.offsetLeft)
						o.appendChild(Drag.obj);
				}
			}
			with (Drag.shadow.style) {
				left = (Drag.cloneobj.offsetLeft + 4) + "px";
				top = (Drag.cloneobj.offsetTop + 4) + "px";
			}
		    document.title = 'left:'+Drag.cloneobj.style.left + " top:" + Drag.shadow.style.top;
		},

		end : function(e) {
			if (!Drag.dragged)
				return;
			Drag.obj.className = "dragLayer";
			Drag.dragged = false;
			Drag.shadow.parentNode.removeChild(Drag.shadow);
			Drag.timer = Drag.repos(150, 15);
			Drag.buildData();

			//Drag.save(); // 每次触发拖放处理后保存
		},
		buildData : function() {
			for ( var field in Drag.data) {
				delete Drag.data[field];
			}
			for (var i = 0; i < Drag.container.childNodes.length; i++) {
				var o = Drag.container.childNodes[i];
				if (!Drag.data[o.id]) {
					Drag.data[o.id] = new Array();
				}
				for (var j = 0; j < o.childNodes.length; j++) {
					if (o.childNodes[j].localName === 'div') {
						Drag.data[o.id].push(o.childNodes[j].id);
					}
				}
			}
		},
		repos : function(aa, ab) {
			//var f=Drag.obj.filters.alpha.opacity;
			var tl = getRealLeft(Drag.cloneobj);
			var tt = getRealTop(Drag.cloneobj);
			var kl = (tl - getRealLeft(Drag.obj)) / ab;
			var kt = (tt - getRealTop(Drag.obj)) / ab;
			//var kf=f/ab;
			return setInterval(
					function() {
						if (ab < 1) {
							clearInterval(Drag.timer);
							Drag.cloneobj.parentNode
									.removeChild(Drag.cloneobj);
							Drag.obj = null;
							return;
						}
						ab--;
						tl -= kl;
						tt -= kt;
						//f-=kf;
						Drag.cloneobj.style.left = parseInt(tl) + "px";
						Drag.cloneobj.style.top = parseInt(tt) + "px";
						//Drag.tdiv.filters.alpha.opacity=f;
					}, aa / ab)
		},
		min : function(e) {
			if (!e)
				e = window.event;
			var obj = getTarget(e);
			var rootObj = obj.parentNode.parentNode.parentNode;
			var id = rootObj.id;
			if (SavedObject.getStatus(id)[1]) {
				SavedObject.setStatus(id, 0);
				rootObj.style.height = "20px";
				rootObj.childNodes[1].style.display = 'none';
			} else {
				SavedObject.setStatus(id, 1);
				rootObj.lastChild.style.display = '';
				rootObj.style.height = SavedObject.getStatus(id)[2];
			}
			obj.innerHTML = obj.innerHTML == 0 ? 2 : 0;
		},

		close : function(e) {
			if (!e)
				e = window.event;
			var obj = getTarget(e);
			var rootObj = obj.parentNode.parentNode.parentNode;
			rootObj.parentNode.removeChild(rootObj);
		},
		save : function() {
			createXMLHttpRequest();
			var url = "submit?drag_val=" + JSON.stringify(Drag.data);
			XMLHttpReq.open("GET", url, true);
			XMLHttpReq.onreadystatechange = function(){
                if (XMLHttpReq.readyState == 4) {
                    if (XMLHttpReq.status == 200) {
                        alert('保存成功');
                    } else {
                        window.alert("保存失败");
                    }
                }
            };
			XMLHttpReq.send(null);
			//document.cookie = name   + "=" + escape(value) + expire;
		},
		read : function(name) {
			var cookieValue = "";
			var search = name + "=";
			if (document.cookie.length > 0) {
				offset = document.cookie.indexOf(search);
				if (offset != -1) {
					offset += search.length;
					end = document.cookie.indexOf(";", offset);
					if (end == -1)
						end = document.cookie.length;
					cookieValue = unescape(document.cookie.substring(offset,
							end))
				}
			}
			return cookieValue;
		}
	}

	function $(id) {
		return document.getElementById(id);
	}
	function getTarget(e) {
		return e.target || e.srcElement;
	}

	function getMouseX(e) {
		return e.pageX ? e.pageX : e.clientX + document.body.scrollLeft
				- document.body.clientLeft;
	}

	function getMouseY(e) {
		return e.pageY ? e.pageY : e.clientY + document.body.scrollTop
				- document.body.clientTop;
	}

	function getRealLeft(o) {
		var l = 0;
		while (o) {
			l += o.offsetLeft - o.scrollLeft;
			o = o.offsetParent;
		}
		return (l);
	}

	function getRealTop(o) {
		var t = 0;
		while (o) {
			t += o.offsetTop - o.scrollTop;
			o = o.offsetParent;
		}
		return (t);
	}

	function cleanWhitespace(node) {
		var notWhitespace = /\S/;
		for (var i = 0; i < node.childNodes.length; i++) {
			var childNode = node.childNodes[i];
			if ((childNode.nodeType == 3)
					&& (!notWhitespace.test(childNode.nodeValue))) {
				node.removeChild(node.childNodes[i]);
				i--;
			}
			if (childNode.nodeType == 1) {
				cleanWhitespace(childNode);
			}
		}
	}

	var SavedObject = {
		elements : new Array(),
		setStatus : function(id, s) {
			for (var i = 0; i < SavedObject.elements.length; i++) {
				if (SavedObject.elements[i][0] == id) {
					SavedObject.elements[i][1] = s;
					break;
				}
			}
		},
		getStatus : function(id) {
			for (var i = 0; i < SavedObject.elements.length; i++) {
				if (SavedObject.elements[i][0] == id)
					return SavedObject.elements[i];
			}
		},
		push : function(o) {
			SavedObject.elements[SavedObject.elements.length] = o;
		}
	}

	var counter = 0;

	function addModule(parentId, prefix) {
		var node = document.createElement('div');
		node.id = "module" + counter;
		node.setAttribute('content', "测试");
		node.className = 'dragLayer';

		var dragNode = document.createElement('div');
		dragNode.className = "dragHeader";
		dragNode.style.cursor = 'move';

		var dragNode_1 = document.createElement('div');
		dragNode_1.style.float = 'left';
		dragNode_1.innerText = prefix + "-module-" + counter;
//		var dragNode_2 = document.createElement('div');
//		dragNode_2.style.float = 'none';
//	 	var dragNode_3 = document.createElement('div');
//		dragNode_3.style.float = 'right';
		dragNode.appendChild(dragNode_1);
//		dragNode.appendChild(dragNode_2);
		/* dragNode.appendChild(dragNode_3); */
		node.appendChild(dragNode);

		var contentNode = document.createElement('div');
		contentNode.className = 'content';
		contentNode.innerText = counter+ "测试测试车是费水电费水电费水电费是的水电费";
		node.appendChild(contentNode);
		$(parentId).appendChild(node);

		Drag.init('container');
		counter++;
	}




</script>
</head>
<body οnlοad="Drag.init('container')">
	<div id="container">
		<div id="leftContainer">
			<header>left module</header>
			<!--
			<div class="dragLayer" id="win1">
				<div class="dragHeader" style="cursor: move">
					<div style="float: left">product new</div>
					<div style="float: none"></div>
					<div style="float: right;">X</div>
				</div>
				<div class="content">这里是内容哈哈哈！！！ 这里是内容哈哈哈！！！ 这里是内容哈哈哈！！！
					这里是内容哈哈哈！！！ 这里是内容哈哈哈！！！ 这里是内容哈哈哈！！！</div>
			</div>
			-->
		</div>
		<div id="rightContainer">
			<header>right module</header>
		</div>
	</div>
	<button class="btn" οnclick="addModule('leftContainer','L')">添加左边</button>
	<button class="btn" οnclick="addModule('rightContainer','R')">添加右边</button>
	<button class="btn" οnclick="Drag.save()">保存拖拽结果</button>
</body>
</html>




kevin_Luan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现拖拽可编辑模块功能代码
01-19
在没给大家分享实现代码之前，先给大家展示下效果图： 具体实现代码如下所示： index.html <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>iNettuts - Welcome!</title> <link href=inettuts.css rel=stylesheet type=text/css /> </head> <body> <div id=head> <h1>iNettu
基于vuedraggable制作的模块拖拽demo
05-16
支持三个区域之间相互拖拽 支持拖拽排序 左侧和右侧数据双击自动移动到另一侧区域的末尾 顶部区域双击移动到右侧区域的末尾， npm install vuedraggable即可安装 vuedraggable官方文档地址：https://www.itxst.com/vue-draggable/j6vzfv6r.html Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 关于Vue.Draggable详细信息可以查看Github地址 点击提交可以获取到三个区域中的数据
HTML拖动模块 自定义布局
08-23
兼容FF IE 带有保存方案,模块块隐藏,模块显示,模块排版,模块风格设置功能
js 实现模块拖动自由布局
liangxia000的博客
05-09 2086
js实现 多个模块拖拽布局功能，通过拖动实现模块位置调整交换，拖出面板后变成图标展示在面板左侧，并对布局信息进行存储功能 实现思路：模块位置坐标化，方便计算
css中position属性的取值：relative absolute fixed sticky的含义？以及属性z-index理解
liweibo348的博客
09-17 560
relative：表示相对定位，是相对对于自身原始位置的定位，记住是是自身。 absolute：绝对定位。是相对于设置了绝对定位的父元素的位置，若父元素没有设置绝对定位，那么就相对于窗体进行绝对定位。 fixed：固定的位置。一般用作悬浮按钮的设计。不管当前页面如何滚动，它的位置始终相对于窗体不变。 sticky：粘贴到某个位置。当组件设置了该属性值后，当页面滑动时，组件会跟着页面移动，当组...
站住，你懂html拖拽吗？
wuwei121313的博客
07-25 206
draggable作用是规定元素是否可拖动，注意链接和图像默认是可以拖动的，并且他可以设置3种状态。2.在被拖拽元素container2上面设置draggable=true。5.设置dragover：当拖拽元素在目标放置元素上移动的时候触发。6.设置drop：当拖拽元素放到目标放置元素上释放时触发此事件。4.设置dragstart：当拖拽元素被拖拽时触发的事件。3.获取目标放置元素和被拖拽元素。
easy-admin.js之layui+sortable图片上传及拖拽排序功能
weixin_41965172的博客
07-01 1381
easy-admin.js之layui+sortable图片上传及拖拽排序功能
HTML5新增的拖拽属性draggable，怎么实现拖拽？
LiAly66的博客
11-26 6151
HTML属性draggable是怎么实现拖拽？1、draggable 属性规定元素是否可拖动。2、提示： 链接和图像默认是可拖动的。3、提示： draggable 属性经常用于拖放操作。
html5 drag移动位置,HTML5+CSS3实现拖放(Drag and Drop)示例
weixin_42298424的博客
06-04 218
本文简单介绍一下HTML5的拖放实现。拖放(Drag 和 drop)是 HTML5 标准的组成部分。浏览器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。被拖元素，dragElement :(1)添加事件：ondragstart(2)添加属性：dragable放置元素，dropElement:1、添加事件：ondarg...
html或者jsp模块拖拽
weixin_37623470的博客
05-05 798
将一个div拖拽到当前页面任意位置，鼠标松开之后div固定在松开时的位置。 上面是效果。 下面是源码： <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css...
页面拖拽模块功能
03-29
网页拖拽功能，模块化的页面应该都会遇到模块反复调整的问题,例如:今天客户觉得A模块在左上角比较好看,明天客户看着不如在右下角更好一点.有了这个插件,页面反复调整将不是问题，让客户自己去调整吧
基于html5dragapi实现的vue树形拖拽组件
08-10
基于html5 drag api实现的vue树形拖拽组件
css页面模块拖拽功能实现
12-02
经过3天时间，终于在ajax网的帮助下，和好友的帮忙测试中，终于完成了这个 css页面模块拖拽功能的实现，简单，实用，现在发出来与大家共享交流下，发现问题请及时反馈，谢谢大家
JavaScript使用面向对象实现的拖拽功能详解
12-10
本文实例讲述了JavaScript使用面向对象实现的拖拽功能。分享给大家供大家参考，具体如下： 面向对象有个前提： 前提：所有东西都必须包含在onload里 改写：不能有函数嵌套，可以有全局变量 过程，如下 onload...
div动态拖拽
07-09
这个主意是鼠标拖拽动态生成！判断div不重叠喔！案列都已经实现了！这个其实就是一个功能的模块来做的！有需要的可以下载看看！借鉴性很强！
antv x6 拖拽流程DEMO
04-26
ANTV X6拖拽流程。可自定义节点、设备，设计设备或节点的属性。 可自定义流程任何方向，可动态扩展。 后期开发可自定义任何功能。 参考官网DEMO地址：https://x6.antv.antgroup.com/examples 参考官网文档：...
基于java的-28-“智慧食堂”设计与实现--LW-源码.zip
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
C#，回文分割问题（Palindrome Partitioning Problem）算法与源代码
04-25
C#，回文分割问题（Palindrome Partitioning Problem）算法与源代码 1 回文串 “回文串”是一个正读和反读都一样的字符串，初始化标志flag=true，比如“level”或者“noon”等等就是回文串。 2 回文分割问题 给定一个字符串，如果该字符串的每个子字符串都是回文的，那么该字符串的分区就是回文分区。 例如，“aba | b | bbabb | a | b | aba”是“abababababa”的回文分区。 确定给定字符串的回文分区所需的最少切割。 例如，“ababababababa”至少需要3次切割。 这三个分段是“a | babbab | b | ababa”。 如果字符串是回文，则至少需要0个分段。 如果一个长度为n的字符串包含所有不同的字符，则至少需要n-1个分段。
node-v9.2.1.tar.xz
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
electron 拖拽
10-18
在 Electron 中实现拖拽功能，可以通过在渲染进程中监听鼠标事件来实现。具体步骤如下： 1. 在 HTML 文件中添加拖拽区域，例如： ```html 拖拽区域 ``` 2. 在渲染进程中获取拖拽区域的 DOM 元素，并添加鼠标事件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值