使拖动或者点击后自动选中对象。

This commit is contained in:
枫谷剑仙 2025-05-12 10:37:50 +08:00
parent e011382e10
commit 16cbd7777b
4 changed files with 62 additions and 18 deletions

View File

@ -1305,7 +1305,7 @@ function showSearchBySeriesId(sId, sType) {
} }
function richTextCardNClick(){ function richTextCardNClick(){
this.querySelector(".monster").click(); this.querySelector(".monster").onclick();
} }
//创建序号类图标 //创建序号类图标
function createIndexedIcon(type, index) { function createIndexedIcon(type, index) {
@ -1343,29 +1343,57 @@ function createIndexedIcon(type, index) {
icon.classList.add(className); icon.classList.add(className);
icon.contentEditable = false; icon.contentEditable = false;
icon.draggable = true; icon.draggable = true;
//icon.tabIndex = 0; // 为了让 :focus 生效
icon.ondragstart = indexedIconOnDragStart; icon.ondragstart = indexedIconOnDragStart;
icon.addEventListener("click", indexedIconFocusSelf);
icon.indexedIcon = {type, index}; //拖拽用的 icon.indexedIcon = {type, index}; //拖拽用的
return icon; return icon;
} }
function indexedIconOnDragStart(event){ function indexedIconOnDragStart(event){
draggedNode = this; // 记录原始节点 if (event.dataTransfer) {
event.dataTransfer.effectAllowed = 'copyMove'; draggedNode = this; // 记录原始节点
event.dataTransfer.setData("indexed-icon", JSON.stringify(this.indexedIcon)); event.dataTransfer.effectAllowed = 'copyMove';
event.dataTransfer.setData("indexed-icon", JSON.stringify(this.indexedIcon));
}
}
function indexedIconFocusSelf(event){
const selectRange = document.createRange();
const selection = window.getSelection();
if (!event?.ctrlKey) {
//调整为只选中节点开始的部位
selectRange.setEndBefore(this);
selectRange.setStartBefore(this);
// //调整为只选中节点结束的部位
// selectRange.setEndAfter(this);
// selectRange.setStartAfter(this);
selection.removeAllRanges();
}
else {
selectRange.selectNode(this); //按住Ctrl时选中整个节点
}
selection.addRange(selectRange);
} }
//获取光标插入点位置 //获取光标插入点位置(惰性函数)
function getCaretRange(event) { const getCaretRange = (()=>{
let range;
if (document.caretPositionFromPoint) { if (document.caretPositionFromPoint) {
const pos = document.caretPositionFromPoint(event.clientX, event.clientY); return function(event){
range = document.createRange(); const pos = document.caretPositionFromPoint(event.clientX, event.clientY);
range.setStart(pos.offsetNode, pos.offset); const range = document.createRange();
range.setStart(pos.offsetNode, pos.offset);
return range;
}
} }
else if (document.caretRangeFromPoint) { else if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(event.clientX, event.clientY); return function(event){
const range = document.caretRangeFromPoint(event.clientX, event.clientY);
return range;
}
} else {
return ()=>{};
} }
return range; })();
}
//将怪物的文字介绍解析为HTML //将怪物的文字介绍解析为HTML
function descriptionToHTML(str) function descriptionToHTML(str)
{ {

View File

@ -3773,7 +3773,7 @@ function initialize() {
// 重置引用 // 重置引用
draggedNode = null; draggedNode = null;
if (newIcon) { if (newIcon && !newIcon.contains(event.target)) {
event.preventDefault(); event.preventDefault();
const range = getCaretRange(event); //插入点 const range = getCaretRange(event); //插入点
if (range) { if (range) {
@ -3781,6 +3781,8 @@ function initialize() {
} else { } else {
event.target.insertAdjacentElement('afterbegin', newIcon); event.target.insertAdjacentElement('afterbegin', newIcon);
} }
indexedIconFocusSelf.call(newIcon); //拖拽后选中这里不传event因为不希望这里的ctrl影响到移动或复制
} }
} }
txtTitleDisplay.ondrop = richTextDropHandler; txtTitleDisplay.ondrop = richTextDropHandler;

View File

@ -48283,11 +48283,11 @@ const cachesMap = new Map([
], ],
[ [
"script-universal_function.js", "script-universal_function.js",
"3642ace4c2c7d66f6e2647e7e056b71a" "15a5aecb568b504ca6e63a84748cd964"
], ],
[ [
"script.js", "script.js",
"fafc4db852bf1cde1c040d73e8536329" "54d48e5bbcb4c71363bd8ac9dcd34ba7"
], ],
[ [
"solo.html", "solo.html",
@ -48303,7 +48303,7 @@ const cachesMap = new Map([
], ],
[ [
"style.css", "style.css",
"0525027386dca0fe5e28549767eb42d7" "e3a1984eeff54b563884d64f9d4f8141"
], ],
[ [
"temp.js", "temp.js",

View File

@ -1854,7 +1854,7 @@ label[for="search-string"] {
.rich-text .detail-mon{ .rich-text .detail-mon{
width: 50px; width: 50px;
height: 50px; height: 50px;
user-select: none; /* 禁止文本选中 */ user-select: none;
} }
.rich-text .detail-mon .monster .id{ .rich-text .detail-mon .monster .id{
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
@ -1863,6 +1863,20 @@ label[for="search-string"] {
} }
.rich-text .drag-able-icon { .rich-text .drag-able-icon {
cursor: grab; cursor: grab;
/* 禁止文本选中 */
user-select: none;
}
.rich-text .drag-able-icon * {
pointer-events: none;
user-select: none;
}
.rich-text .drag-able-icon:active,
.rich-text .drag-able-icon:focus
{
outline-width: 1px;
outline-offset: 2px;
outline-style: dotted;
outline-color: slateblue;
} }
/*搜索结果显示觉醒列表的相关css*/ /*搜索结果显示觉醒列表的相关css*/
.awoken-preview .awoken-ul .awoken-preview .awoken-ul