Using the movable style in iframe will be inserted externally

[zlyyyy]

Environments

• Framework name: movable
• Framework version: 0.47.9
• Moveable Component version:
• Testable Address(optional):

Description

I want to implement drag and drop of sub elements within the iframe, but I found that styles are inserted outside the iframe, resulting in ineffective styles

[daybrush]

@zlyyyy

okay, i'll fix it soon.

[jadiagaurang]

@daybrush I probably will have to use iFrame for my implementation. Will you be able to give us a CodePen Example after the fix?

[daybrush]

@jadiagaurang

I'll let you know after fix.

My predictions are:

const iframeDocument = document.querySelector("iframe").contentDocument;
const container = iframeDocument.querySelector(".container");

const moveable = new Moveable(container, {
});

[zlyyyy]

@daybrush The internal iframe uses the selectEnd event of selectoRef to set the moveableRef. target. Dragging will cause it to stutter, making it easy to watch together

[daybrush]

@zlyyyy @jadiagaurang

• croact-moveable 0.4.0
• @moveable/helper 0.1.2
• lit-moveable 0.25.0
• moveable 0.48.0
• preact-moveable 0.50.0
• react-moveable 0.51.0
• svelte-moveable 0.40.0
• vue-moveable 2.0.0-beta.76
• vue3-moveable 0.23.0
• ngx-moveable 0.45.0

moveable's new version is released. Try it. ([email protected])

iframe example: https://codepen.io/daybrush/pen/BaGBKzK

[zlyyyy]

@zlyyyy @jadiagaurang

• croact-moveable 0.4.0

• @moveable/helper 0.1.2

• lit-moveable 0.25.0

• moveable 0.48.0

• preact-moveable 0.50.0

• react-moveable 0.51.0

• svelte-moveable 0.40.0

• vue-moveable 2.0.0-beta.76

• vue3-moveable 0.23.0

• ngx-moveable 0.45.0

moveable's new version is released. Try it. ([email protected])

iframe example: https://codepen.io/daybrush/pen/BaGBKzK

So awesome! ! I'll try it later

[zlyyyy]

Tested without problems. Thanks again to the author @daybrush