I have implemented a custom drag and drop solution to handle drag and drop of mulitple selected elements. I build my own dragUI using the HTML setDragImage function, which works well. Now i am trying to add some animation on the drop, but i am stuck.
I have tried to access the dragUI via a set id, but it is inaccessible while being in this dragUI. I already thought it is impossible without a custom drag implementation but then i accidentally dragged over the google chrome URL bar and saw an animation. I'd be fine it looked exactly like this - how can i achieve this?
Here is a video of what i'm talking about: https://imgur.com/a/aObL3eC
Related
Is there any way to contain a draggable element (using the native html drag and drop api rather than a library) to the confines of one of its parents? Using Firefox I can drag an element even outside of the browser, into the search bar, etc., which is pretty annoying. Ideally, I'd like the draggable image to be 'stuck' inside a container.
Ie I'm looking for something that mimics the behavior of the jquery UI draggable library https://api.jqueryui.com/draggable/#option-containment
I've tried hiding/showing the drag image on a dragexit event, but unfortunately the drag image seems static once its generated?
In my scenario an HTML5 page (parent) contains an iframe (child) from a different domain. Ideally I would like to be able to drag an element from the parent into the child.
This works in FireFox but fails in Chrome due to security restrictions (afaik https://bugs.chromium.org/p/chromium/issues/detail?id=251718).
However if I open the same HTML5 page in a different browser instance, drag from there into the iframe of the other instance, then this is allowed.
The reasoning for the security restriction is that the user does not see the URL of the target iframe, but this is true in both scenarios. Why would one work and but not the other?
Sample on
http://carsten-leue.de/iframe/cross-domain/
Try to drag drag me into drop here. This is not possible in Chrome. Open the same URL in another browser window and drag drag me from the new window into drop here of the old window. This works.
I would like you to use this API since it allows dragging! (not like an image type how your source shows!)
<!-- HTML -->
<body>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</body>
// JavaScript
document.getElementById('elementId').draggable();
// Or if you have a class name
document.getElementsByClassName('elementClass').draggable();
Using HTML5 Drag and Drop API to create Cross Frame and Cross Browser Implementation. http://blog.stackhive.com/post/137799349684/building-a-seamless-drag-and-drop-interface
EDIT - The previous link wasn't valid (dockPHP got rebranded as StackHive) so have written out a more complete post that can help in creating an epic drag and drop interface.
Source: Drag-Drop elements between parent frame and child iframe
I'm working with the MarkupsCore extension and want to keep my added UI open inside the viewer while adding or working with Markups.
From what I can tell once I call enterEditMode the UI won't return until I hide all of my Markups. The buttons I have added don't seem to change state and their still marked as visible when I'm debugging, yet they don't show.
I tried setVisibility on the objects but the method returns false because it evaluates the buttons as not hidden.
Is there something I'm missing?
If I'm understanding your question right, that's expected as you cannot move/rotate/zoom the model when editing the Markups, mainly because these are SVG shapes on top of the view. Ideally you should also keep the Viewer state to restore when viewing the markups later.
I'm working on a plugin where we rely on the user's ability to drag-and-drop an image from our Google Docs plugin sidebar to their current Google Document, inserting it in the document when they drop.
This has worked fine up till now using HtmlService.SandboxMode.NATIVE, as the browser implements this natively, but that sandbox mode will soon be sunsetted in favor of HtmlService.SandboxMode.IFRAME.
In iFrame sandbox mode, this no longer works, as dragging and dropping between iFrames is disallowed by browser security.
I initially thought we might be able fake this by catching an event on drop, and inserting the image at the user's cursor location, but we're not getting any events for the drag and drop over the document.
It doesn't look like window messaging is an option.
Has anyone dealt with this or a similar situation?
Any insight into how we might either
a) make drag and drop work, or
b) fake it?
I'm using HTML5 drag and drop to create some sortable tabs. Here's the exact code although it's Angular specific: https://stackoverflow.com/a/23443028/1267778
I have an svg chart using d3.js inside one of those tabs.
The sortability works but when I click on the chart, it does a transition and the sortability is now broken until I reload the page.
I have other svg charts in others tabs that I can interact with without breaking it, however the chart that causes problems doesn't throw any error or anything. It just breaks without any clues as to what happened.
I note that the ".dragging" class is still being applied when I start dragging, but there is no drag or drop effect; the tab stays in place.
Any idea as to what might be happening or where I can start looking for problem? I'm not really even sure where to start since no errors are thrown and I don't see how the drag and drop could possibly relate to me clicking the chart unless javascript crashed but there is no sign of that.