使拖动或者点击后自动选中对象。
This commit is contained in:
parent
e011382e10
commit
16cbd7777b
|
@ -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)
|
||||||
{
|
{
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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",
|
||||||
|
|
16
style.css
16
style.css
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue