tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve draggable item generalization

Browse Source
This commit is contained in:
Arthur Lu 2023-08-29 21:26:57 +00:00
parent 98e2445979
commit d02a585665
2 changed files with 8 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
scripts/config.js
View File

@ -760,10 +760,12 @@ function addBootLine (container, data, before = null) {
const item = document.createElement("draggable-item"); const item = document.createElement("draggable-item");
item.data = data; item.data = data;
item.innerHTML = ` item.innerHTML = `
<img src="images/actions/drag.svg" id="drag"> <div style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;">
<img src="${bootMetaData[data.prefix].icon}"> <img src="images/actions/drag.svg" id="drag">
<p style="margin: 0px;">${data.id}</p> <img src="${bootMetaData[data.prefix].icon}">
<p style="margin: 0px; overflow-x: hidden; white-space: nowrap;">${data.detail}</p> <p style="margin: 0px;">${data.id}</p>
<p style="margin: 0px; overflow-x: hidden; white-space: nowrap;">${data.detail}</p>
</div>
`; `;
item.draggable = true; item.draggable = true;
item.classList.add("drop-target"); item.classList.add("drop-target");

10
scripts/draggable.js
View File

@ -64,12 +64,6 @@ class DraggableItem extends HTMLElement {
// for whatever reason, only grid layout seems to respect the parent's content bounds // for whatever reason, only grid layout seems to respect the parent's content bounds
this.shadowRoot.innerHTML = ` this.shadowRoot.innerHTML = `
<style> <style>
#wrapper {
grid-template-columns: auto auto 8ch 1fr;
display: grid;
column-gap: 10px;
align-items: center;
}
#drag { #drag {
cursor: move; cursor: move;
} }
@ -86,7 +80,7 @@ class DraggableItem extends HTMLElement {
// add drag and drop listeners // add drag and drop listeners
this.addEventListener("dragstart", (event) => { this.addEventListener("dragstart", (event) => {
this.content.style.opacity = "0.5"; this.content.style.opacity = "0.5";
const data = { data: this.data, content: this.content.innerHTML, value: this.value }; const data = { id: this.id, data: this.data, content: this.content.innerHTML, value: this.value };
event.dataTransfer.setData("application/json", JSON.stringify(data)); event.dataTransfer.setData("application/json", JSON.stringify(data));
event.dataTransfer.effectAllowed = "move"; event.dataTransfer.effectAllowed = "move";
}); });
@ -127,7 +121,7 @@ class DraggableItem extends HTMLElement {
item.innerHTML = transfer.content; item.innerHTML = transfer.content;
item.draggable = true; item.draggable = true;
item.classList.add("drop-target"); item.classList.add("drop-target");
item.id = `boot-${transfer.data.id}`; item.id = transfer.id;
item.value = transfer.data.value; item.value = transfer.data.value;
event.target.parentElement.insertBefore(item, event.target); event.target.parentElement.insertBefore(item, event.target);
} }