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?
Related
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
I'm a beginner in React and even in HTML. I need to create a drag and drop application with functionality like https://app.letter.so/try. I need to drag element ( text/button) from toolbox and need to place anywhere in a div. I did it partially by using react-rnd. I did it by wrapping controls in toolbar section in . And it works. But it removes controls from that toolbar while we drag. And also I kept element as button/text(controls) in toolbar. Instead of that I want controls to be placed in div only on dropping control in div. I have attached a pic to show the desired resultsample image
I am using the draggable attribute to enable reordering of elements like the following . I detect the various drag events and can interpret these to reorder the array of data to show.
The problem is that I attach draggable to the row as a whole to get the visual effect I want from the browser, but I cannot now select the text "Two" using the mouse, because it is being interpreted as a drag event. Attaching draggable="false" to the input did not help.
The ideal UI would that you have to drag from the drag-icon but that when you do, you see the whole row of elements move (at least in Chrome as I know draggable can look different between browsers).
One option might be to use a blurry png of the row specify the drag Image, but ideally it would be an the live data
So the solution was to add event listener to the drag icon such that when the mouse was over the parent node was given the draggable attribute at that time. That prevented dragging from any other part of the component as well as the artifact when trying to select text - a double win
I'm building a web page that will be viewed on mobile devices (Blackberry specifically). I have navigation drop down of sorts implemented as a <select> in the upper left corner of the page. Rather than require the user to click on the drop down directly I'd like to have so that the user can click/tap anywhere on the page the select drop down in the upper left corner opens. The page has no other links or clickable objects other than the select drop down in the upper left.
Is this even possible? From what I've found so far it seems that it's impossible to programmatically open a <select> drop down, but I figured I'd throw this specific case out there.
Since it's not possible to fake key presses with JavaScript (and rightfully so for security reasons), the closest thing is to change the size of the <select> element (change it from a drop down control to a list box control and back).
Demo, Code (pure JS, no library)
When the user selects an option by clicking (or tapping) it, the click event handler 'closes' the list box by setting its size back to 1, after which it converts back to a normal drop down control. I have only tested this in (non-mobile) Chrome, let me know if it works on Blackberry or not.
Edit:
I have created a small jQuery plugin that wraps behavior and configurability into a more comprehensible control. I have tested this on Safari Mobile on iOS 4 and it behaves just like a regular drop down does in that browser, except it can be opened programmatically.
Demo, Code (jQuery 1.7)
It works like this:
$("select").openable({ triggers: $("#trigger") });
Clicking on any trigger will open the selection UI.
I have also added a handler for the key up event to catch Enter, Esc and Space to 'close' the list box. This mimics the drop down control's selection mechanism on desktop browsers.
Of course, on a desktop browser this will change the layout of your page, as it's different from the native drop down control. You will have to come up with a CSS solution for that (something with position: absolute and z-index probably). But on iOS the selection UI isn't rendered on the page, so it's not a problem.
Again, haven't tested this plugin on BlackBerry...
I am trying to accomplish an "imagemap" in flash where you click on different areas in the image and when you click on it, a popup (within flash) comes up showing more information about the object that was clicked on. The popup has a close button that can will then close the popup.
My biggest trouble is the way I have my code right now is when you click on a region of the map, it creates a popup on the fly, and then I use addChild(_myPopup) to add it to the display list. The problem with this approach for me, is that the Popup is now a Child of the button I just pressed, but this object organization doesn't really make sense to me. I'd like to have the popup not be a child of the button and it be on it's own layer or a child of the stage directly.
What is a good approach and code architecture for building such an organization of objects? I'm fairly new to AS3 and I've built some small applications but my knowledge is limited.
Thanks
UPDATE
ok looks like calling stage.addChild(myPopup) from inside the button works pretty well. Is this good practice?
Assuming you have a hierarchy that looks something like this:
stage
Main class
Image class
Button
It's good practice to never call upwards in the displaylist, every object only deals with it's children. Events however, are a nice way of communicating upwards. Have the Button dispatch an event, preferrably a custom one, then handle that using a listener in the main class that then deals with creating a popup on top of everything.
An often encountered practise to organize the layers of the visible application is:
stage
main class with all children
popup container
tooltip container
mouse cursor container (apparently not longer necessary since player 10 supports custom cursors)
So you create your popups always in the popup container above the main class. If you would have tooltips, they should go into the tooltip container. This approach guarantees that popups are always visible above the main app and tooltips are always visible on top of everything.