富文本编辑器增加可以拖动队伍角色图标到指定位置的功能

script-universal_function.js

@@ -1245,16 +1245,16 @@ function cardN(id) {
 	monOuterDom.monDom.onclick = cardNClick
 	changeid({ id: id }, monDom);
 
-	function cardNClick(event) {
-		event?.preventDefault();
-		const monstersID = document.getElementById("card-id");
-		const formIdSearch = document.getElementById("form-id-search");
-		monstersID.value = this.getAttribute("data-cardid");
-		formIdSearch.onchange();
-		editBox.show();
-	}
 	return monOuterDom;
 }
+function cardNClick(event) {
+	event?.preventDefault();
+	const monstersID = document.getElementById("card-id");
+	const formIdSearch = document.getElementById("form-id-search");
+	monstersID.value = this.getAttribute("data-cardid");
+	formIdSearch.onchange();
+	editBox.show();
+}
 
 //产生队伍目标类型
 function createTeamFlags(target, type)
@@ -1304,42 +1304,68 @@ function showSearchBySeriesId(sId, sType) {
 	}
 }
 
+function richTextCardNClick(){
+	this.querySelector(".monster").click();
+}
 //创建序号类图标
 function createIndexedIcon(type, index) {
+	const className = "drag-able-icon";
+	let icon;
 	if (type == 'card') {//卡片头像
-		const avatar = cardN(index);
-		avatar.contentEditable = false;
-		//avatar.monDom.setAttribute("onclick", "cardNClick.call(this);return false;")
-		return avatar;
-	}
-	const icon = document.createElement("icon");
-	icon.setAttribute("contenteditable", false);
-	//icon.contentEditable = false;
-	switch(type) {
-		case 'awoken': { //觉醒
-			icon.className = "awoken-icon";
-			icon.setAttribute("data-awoken-icon", index);
-			break;
-		}
-		case 'type': { //类型
-			icon.className = "type-icon";
-			icon.setAttribute("data-type-icon", index);
-			break;
-		}
-		case 'orb': { //宝珠
-			icon.className = "orb";
-			icon.setAttribute("data-orb-icon", index);
-			break;
-		}
-		case 'latent': { //潜觉
-			icon.className = `latent-icon`;
-			icon.setAttribute("data-latent-icon", index);
-			icon.setAttribute("data-latent-hole", 1);
-			break;
+		icon = cardN(index);
+		icon.onclick = richTextCardNClick;
+	} else {
+		icon = document.createElement("icon");
+		switch(type) {
+			case 'awoken': { //觉醒
+				icon.className = "awoken-icon";
+				icon.setAttribute("data-awoken-icon", index);
+				break;
+			}
+			case 'type': { //类型
+				icon.className = "type-icon";
+				icon.setAttribute("data-type-icon", index);
+				break;
+			}
+			case 'orb': { //宝珠
+				icon.className = "orb";
+				icon.setAttribute("data-orb-icon", index);
+				break;
+			}
+			case 'latent': { //潜觉
+				icon.className = `latent-icon`;
+				icon.setAttribute("data-latent-icon", index);
+				icon.setAttribute("data-latent-hole", 1);
+				break;
+			}
 		}
 	}
+	icon.classList.add(className);
+	icon.contentEditable = false;
+	icon.draggable = true;
+	icon.ondragstart = indexedIconOnDragStart;
+	icon.indexedIcon = {type, index}; //拖拽用的
 	return icon;
 }
+function indexedIconOnDragStart(event){
+	draggedNode = this; // 记录原始节点
+	event.dataTransfer.effectAllowed = 'copyMove';
+	event.dataTransfer.setData("indexed-icon", JSON.stringify(this.indexedIcon));
+}
+
+//获取光标插入点位置
+function getCaretRange(event) {
+	let range;
+	if (document.caretPositionFromPoint) {
+		const pos = document.caretPositionFromPoint(event.clientX, event.clientY);
+		range = document.createRange();
+		range.setStart(pos.offsetNode, pos.offset);
+	}
+	else if (document.caretRangeFromPoint) {
+		range = document.caretRangeFromPoint(event.clientX, event.clientY);
+	}
+	return range;
+}
 //将怪物的文字介绍解析为HTML
 function descriptionToHTML(str)
 {

script.js

@@ -18,6 +18,8 @@ let qrcodeReader; //二维码读取
 let qrcodeWriter; //二维码输出
 let selectedDeviceId; //视频源id
 
+let draggedNode = null; // 保存被拖动的原始节点
+
 const dataStructure = 5; //阵型输出数据的结构版本
 const cfgPrefix = "PADDF-"; //设置名称的前缀
 const className_displayNone = "display-none";
@@ -3742,16 +3744,53 @@ function initialize() {
 
 	//设置为可以拖放已经编辑好的队伍
 	function richTextDropHandler(event) {
-		let formStr = event.dataTransfer.getData('from');
-		if (formStr) {
+		//console.debug(event);
+
+		let isCopy = event.ctrlKey; //默认为按Ctrl是复制,不然是移动
+		if (controlBox.querySelector("#change-swap-to-copy").checked)
+			isCopy = !isCopy; //勾选后逆向操作
+		event.dataTransfer.dropEffect = isCopy ? 'copy' : 'move';
+		
+		let newIcon;
+		const formStr = event.dataTransfer.getData('from');
+		if (formStr) { //从队伍里拖下来的,需要重新创建怪物头像,强制复制
 			event.preventDefault();
+			isCopy = true;
+			event.dataTransfer.dropEffect = 'copy';
 			const [teamNum, isAssist, indexInTeam] = JSON.parse(formStr);
-			const mon = formation.teams[teamNum][isAssist][indexInTeam]
-			event.target.insertAdjacentElement('afterbegin', createIndexedIcon('card', mon.id));
-		} 
+			const mon = formation.teams[teamNum][isAssist][indexInTeam];
+			newIcon = createIndexedIcon('card', mon.id);
+		} else if (draggedNode) {
+			if (event.dataTransfer.dropEffect === 'move') {
+				newIcon = draggedNode;
+			} else {
+				//因为需要保留完整行为,所以不能直接用 cloneNode(true)
+				const indexed = event.dataTransfer.getData('indexed-icon');
+				const {type, index} = JSON.parse(indexed);
+				newIcon = createIndexedIcon(type, index);
+			}
+		}
+		// 重置引用
+		draggedNode = null;
+
+		if (newIcon) {
+			event.preventDefault();
+			const range = getCaretRange(event); //插入点
+			if (range) {
+				range.insertNode(newIcon);
+			} else {
+				event.target.insertAdjacentElement('afterbegin', newIcon);
+			}
+		}
 	}
 	txtTitleDisplay.ondrop = richTextDropHandler;
 	txtDetailDisplay.ondrop = richTextDropHandler;
+	txtTitleDisplay.ondragover = richTextDragOverHandler;
+	txtDetailDisplay.ondragover = richTextDragOverHandler;
+	//必须加上这个才可以内部拖动
+	function richTextDragOverHandler(event) {
+		event.preventDefault();
+	}
 
 	//这个写法的目的其实是为了确保添加顺序与1、2、3一致，即便打乱了顺序，也能正确添加
 	for (let ti = 0, ti_len = formationBox.querySelectorAll(".team-bigbox").length; ti < ti_len; ti++) {
@@ -3797,7 +3836,7 @@ function initialize() {
 	}
 	//编辑界面每个怪物的头像的放下
 	function dropMonHead(event) {
-		let formStr = event.dataTransfer.getData('from');
+		const formStr = event.dataTransfer.getData('from');
 		if (!formStr) return false;
 		const dataFrom = JSON.parse(formStr);
 		const dataTo = getMemberArrayIndexFromMonHead(this);
@@ -3882,7 +3921,7 @@ function initialize() {
 	}
 	function interchangeCard(formArr, toArr, isCopy) {
 		//优先使用传入的复制，然后才是考虑开关
-		isCopy = isCopy || controlBox.querySelector("#change-swap-to-copy").checked; //储存交换“复制”和“替换”
+		isCopy = isCopy ?? controlBox.querySelector("#change-swap-to-copy").checked; //储存交换“复制”和“替换”
 		const [fromTeamNum, fromIsAssist, fromIndexInTeam] = formArr;
 		const [toTeamNum, toIsAssist, toIndexInTeam] = toArr;
 

service-worker.js

@@ -48283,11 +48283,11 @@ const cachesMap = new Map([
 	],
 	[
 		"script-universal_function.js",
-		"3ce2b3d06e12181f692fa5dd50fe9502"
+		"3642ace4c2c7d66f6e2647e7e056b71a"
 	],
 	[
 		"script.js",
-		"203ca7805c5b2bc4015be3486f677a44"
+		"fafc4db852bf1cde1c040d73e8536329"
 	],
 	[
 		"solo.html",
@@ -48303,7 +48303,7 @@ const cachesMap = new Map([
 	],
 	[
 		"style.css",
-		"df773db29cb3d431cce9f4d3b87d27d5"
+		"0525027386dca0fe5e28549767eb42d7"
 	],
 	[
 		"temp.js",

style.css

@@ -1826,6 +1826,7 @@ label[for="search-string"] {
 .rich-text .detail-mon .monster{
 	transform: scale(0.5);
 	margin: calc(-100px * (1 - 0.5) / 2);
+	pointer-events: none;
 }
 .custom-addition .detail-mon .monster{
 	transform: scale(0.35);
@@ -1853,12 +1854,16 @@ label[for="search-string"] {
 .rich-text .detail-mon{
 	width: 50px;
 	height: 50px;
+	user-select: none; /* 禁止文本选中 */
 }
 .rich-text .detail-mon .monster .id{
 	background-color: rgba(0,0,0,0.5);
 	padding: 2px;
 	font-size: 23px;
 }
+.rich-text .drag-able-icon {
+	cursor: grab;
+}
 /*搜索结果显示觉醒列表的相关css*/
 .awoken-preview .awoken-ul
 {