Border around embedded apps appears by dragNdrop on websites

lwolf shared this problem 3 years ago

Not a Problem

I embed my geogebra apps in my websites using cdn.geogebra.org/apps/deployggb.js with div id="applet_container1" in html. Works fine.

But on dragstart of an html-element, the embedded apps get a black border. On dragover over the apps the border turns to red. Also the cursor shows “drop” on the whole <body>, where it should show “not-allowed”-sign. (tested with firefox, chrome, edge on windows)

See example (drag the cards!):

http://katgym.by.lo-net2.de/c.wolfseher/web/quiz/platoKoerper.html

How can I avoid this? (I don’t want to drop anything on the apps.)

The embedded apps should behave like the <img>s in this example (drag the cards!):

http://katgym.by.lo-net2.de...

Thanks for help!

P.S.: By embedding apps with iframe the border doesn’t appear, but the “showFullscreenButton” doesn’t work. But that’s another problem…

The same problem

Comments (3)

Michael Borcherds ● 3 years ago

full screen button does work with iframe - check the docs https://wiki.geogebra.org/e...

Reply URL

lwolf ● 3 years ago

Thanks Michael!

with adding „allowfullscreen“ to iframe-tag the showFullscreenButton works with iframes.

Do you also have a solution for my other problem? How can I prevent, that (with deployggb.js) embedded apps react on drag-drop-events. They should not act as a dropzone with drawing a border or make the whole <body> act as dropzone (see mouse-cursor).

App parameters like “preventFocus“ don’t help. With CSS, javasricpt?

Sorry for that “special” problem. But I would be interested in a solution in order to learn programming.

Thanks for help!

URL

Michael Borcherds ● 3 years ago

Try StackOverflow, I doubt anyone here knows

URL