I am designing a UI that allows the user to drag and drop a box (red outline) to determine its position on the screen (black box).
UI
It can also be moved by changing the inputs on the right.
I am using Angulars cdkDrag for the drag and drop functionality which applies a
transform: translate3d(x, y, z)
to move the box (i use the event listener to update the input values on the right).
When a user input is applied I update this property depending on the input.
Unfortunately, when the box is dragged again, Angular reapplies a translate3d creating two properties that are conflicting with each other, creating terrible UX when dragging after user input.
two transform properties
Is there a way around this?
Turns out, there is a way to set the drag position of the element manually. Which in my case I can do on user input.
[cdkDragFreeDragPosition]="dragPosition"
dragPosition = {x: 50, y: 100};
This maintains a single translate property and creates a smooth UX
Related
I have two scenes, scene1 and scene2. For dragging I have tried with three js draggable but it did not allow me to drag objects outside of scene1. I need to drag objects from scene1 and drop it to scene2.I have attached an image of it. Thanks in Advance.
[The image with two scenes]
"Draggable" in three.js simple means you can transform an object within the space where it exists. To move it between scenes, you would need to view it more as a transaction.
Mousedown on the item you want to drag
Save a reference to the object (var tempobj = selectedObj;)
Start dragging
Detect when your cursor exits the first viewport
Remove the object from scene 1 (scene1.remove(tempobj);)
Detect when your cursor enters the second viewport
Add the object to scene 2 (scene2.add(tempobj);)
Continue dragging the object until you mouse-up
I have a draggable="true" element which I am dropping into a drop zone. The event gives me back a few properties which I can use to determine it's position and create a new element where it got dropped.
It seems to only give the mouse position. But it doesn't seem to contain the offset of where the image was in relation to the mouse.
Where would I get that information?
A picture to help explain, the mouse is at the yellow dot. The drop event returns event.x and event.y where the mouse is.... But I need to know where the blue dot is, or the offset (red lines)
There are offsetX and offsetY properties in html5 native DragEvent.
For example in React you can get these values through native
function onDragStart(event: React.DragEvent) {
console.log(event.nativeEvent.offsetX)
console.log(event.nativeEvent.offsetY)
}
Is it possible to move any elements added using
chart.renderer
as we update the range or the navigator handles?
There is a square in this fiddle. Can we shift its position as we update the navigator?
Or can you point me to the function in the source code that can help?
Thanks
Update: i want to draw trendlines/ fibonnacci retracements etc. based on user events. Currently, i draw & drag the lines using chart.renderer until the mouseup event, calculate the x,y values of the end points, delete the rendered lines & then add new series which visually imitate those rendered lines. This is surely not the best solution. The issue is how to remember the position of the user selection & show/scale the same only when those lines are in the visible range.
So i am wondering if we could directly use some internal "scaling" function that calculates the visible points of the series based on the current extremes.
Rendered object's position is basend on pixels, so when you use navigator, pixels "are the same" so object stay in the same position. But you can catch navigator "sliding" by setExtremes and aftersetExtremes functions and then move element by translate().
Simple example of using translate():
obj.translate(120,20);
http://jsfiddle.net/Ne7QV/1/
Only what you need is common both elements, according to your expectations.
I am not sure how to do this. Can it be done? How can it be done eligently? And hopefully can it be done without the need for another plugin library (jquery is ok) - I am trying to cut down the number of js files.
I have a canvas with a map in it. The user can click on the map. Then I want a white square to appear near to where the user clicked (rounded corners and a black border) with a few options on it for the user to select one. These can be text options, eg 'Country Summary', 'GDP', etc. Then the user selects one and the info appears in a area to the left, and the white option square automatically disappears.
Is this possible? Can it be done without the need for a window with a blue bar at the top and all the other window baggage?
Hope someone can help.
Jon
Yes, it can be done. You don't have to do it in the canvas, you can use regular HTML for that part.
Just add a new element to the page with the following CSS properties
position:absolute;
display:inline;
(as well as some CSS for rounded corners and black borders)
and then set its X and Y properties to the X and Y mouse coordinates of the event.
Then work with that element as you would with anything else.
I'm working on a script to do several things. In a nutshell, here's what it needs to do:
Read the coordinates from a page and be able to pop up a box within a specific region.
The pop up box needs to be able to follow the mouse around.
I need to be able to modify the box to look however I want (I was thinking a div container that is set to display:hidden, and then the JS sets the display to block when your mouse is in the specified region).
I need to be able to modify it easily (aka, add and subtract objects and coordinate sets)
I was originally using HTML maps (), and that worked great, until I resized my browser, and the div that I had following the mouse no longer lined up correctly. Something about the offset not working correctly, and I couldn't get it to work correctly, so I switched to an HTML canvas.
And now I've got the coordinates in the canvas correctly, I just can't figure out how to get something to pop up when the mouse is inside of a certain section. Here's my current code:
function drawLines(numbers, color){
//poly [x,y, x,y, x,y.....];
var poly=numbers;
context.fillStyle = color;
context.beginPath();
context.moveTo(poly[0], poly[1]);
for( item=2 ; item < poly.length-1 ; item+=2 )
{context.lineTo( poly[item] , poly[item+1] )};
context.closePath();
context.fill();
}
I've got each region inside of an array, which I then pass to the function one by one. The color was a test, and I can easily get each region to show up as a specified color, but that doesn't solve my problem. Any ideas? Thanks!
Seems strange to jump to canvas over a style issue, but ignoring that...
You could bind mousemove events on the canvas element and then do hit tests on your region to see if the mouse is inside the region.
Doing the hit test efficiently might be tricky depending on the number of regions your testing, but it's definitely doable.
The canvas is just like any other block level element, so the same events apply and are bound in the same way.
Here's one example of mouse events interacting with canvas. In this example, the events are bound to the document, but similar ideas apply.
http://dev.opera.com/articles/view/blob-sallad-canvas-tag-and-javascrip/