The selection of elements within the iframe does not take effect

[Layyy]

Environments

• Framework name: selecto
• Framework version: 1.22.3
• Component name:
• Component version:
• Testable Address(optional):

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

[Daybrush (Younkue Choi)]

@zlyyyy

Is the selecto also in an iframe?

[Layyy]

@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

[Daybrush (Younkue Choi)]

@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.

[Layyy]

@daybrush
When will the css issue be fixed? At that time, I can put selecto in the iframe for testing

[Daybrush (Younkue Choi)]

@zlyyyy

selecto 1.22.4 is released. Try it. Thank you :)

[Layyy]

@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

[Daybrush (Younkue Choi)]

@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>

[Layyy]

@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?

[Daybrush (Younkue Choi)]

@zlyyyy

It will take a while. It will probably be released within this week.

[Layyy]

@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