Closed zlyyyy closed 1 year ago
@zlyyyy
Is the selecto also in an iframe?
@daybrush Unable to add in iframe because style cannot be inserted into iframe. Currently, it is wrapped in iframe and I raised an issue yesterday regarding the issue of not being able to insert into iframe
@zlyyyy
css issue will be fixed.
But if the selecto is outside the iframe and the object to be selected is inside the iframe then it won't work.
@daybrush When will the css issue be fixed? At that time, I can put selecto in the iframe for testing
@zlyyyy
selecto 1.22.4 is released. Try it. Thank you :)
@daybrush The style is normal, but the drag-and-drop selection is still not possible. It is still the same problem as above. I am sorry that I cannot provide the source code. If possible, can you provide a case of selecting and dragging in an iframe, thank you very much
@zlyyyy
selecto 1.22.5 is released.
It is expected that it will probably be drag & drop.
<iframe width="1000" height="1000" id="iframe"></iframe>
<script src="../../dist/selecto.js"></script>
<script>
const iframeWindow = iframe.contentWindow;
const iframeDocument = iframe.contentDocument;
iframeDocument.body.innerHTML = `
<style>
.target,
.target2 {
position: absolute;
background: #faa;
box-sizing: border-box;
}
.target.selected {
border: 4px solid #f55;
}
</style>
<div class="target" style="top: 50px; left: 50px; width: 50px; height: 50px">T1</div>
<div class="target" style="top: 50px; left: 150px; width: 150px; height: 50px">T2</div>
<div class="target" style="top: 150px; left: 50px; width: 100px; height: 50px">T3</div>
<div class="target" style="top: 300px; left: 250px; width: 50px; height: 150px">T4</div>
<div class="target" style="top: 200px; left: 400px; width: 100px; height: 0px"></div>
<div class="target2" style="top: 330px; left: 80px; width: 120px; height: 120px" contenteditable="true">T7</div>
`;
const selecto = new Selecto({
container: iframeDocument.body,
dragContainer: iframeWindow,
hitRate: 0,
ratio: 0,
selectableTargets: [".target"],
selectFromInside: false,
selectByClick: true,
toggleContinueSelect: "shift",
// continueSelectWithoutDeselect: true,
}).on("dragStart", e => {
console.log("ds", e.inputEvent.target);
}).on("drag", e => {
selecto.findSelectableTargets();
}).on("selectStart", e => {
console.log("start", e);
e.added.forEach(el => {
el.classList.add("selected");
});
e.removed.forEach(el => {
el.classList.remove("selected");
});
}).on("selectStart", () => {
setTimeout(() => {
iframeDocument.body.insertAdjacentHTML("beforeend", `<div class="target" style="top: 300px; left: 50px; width: 50px; height: 50px">T6</div>`);
});
}).on("select", e => {
console.log(e.removed, e.added);
}).on("selectEnd", e => {
if (e.isDouble) {
console.log("dblclick");
}
console.log("end", e);
e.afterAdded.forEach(el => {
el.classList.add("selected");
});
e.afterRemoved.forEach(el => {
el.classList.remove("selected");
});
}).on("keydown", () => {
iframeDocument.querySelector(".button").classList.add("selected");
}).on("keyup", () => {
iframeDocument.querySelector(".button").classList.remove("selected");
});
</script>
@daybrush Thank you so much! ! 1.22.5 has no problems. Now there is only the iframe problem of Moveable, how is the progress of Moveable now?
@zlyyyy
It will take a while. It will probably be released within this week.
@daybrush Thank you! Can you provide an example of using moveable and selecto in iframe after it is fixed? I think other people will encounter the same problem as me, so you can refer to it at that time
Environments
Description
The selection of elements within the iframe does not take effect As shown in the figure, the box selection is invalid and will conflict with the drag event![image](https://github.com/daybrush/selecto/assets/22760932/a11f2505-6934-478b-b3ab-f0fe55f130e1)