Pure JavaScript (no JQuery, D3, or other external libraries). I'm dragging SVG objects that look like columns of rectangles around. They have connecting lines between the rectangles, and when I drag one rectangle across another, I remove all elements from the DOM, check whether each rectangle in a column corresponds to a rectangle in neighboring column, and draw a new connecting line between them if that condition is true. In the console I can see that the elements are created immediately, but they aren't rendered until I release the mouse and stop the drag. Because I may drag across more than one column and need to compare the results at each position before deciding where to drop, I need to force the new elements not just to be created immediately, but also to be rendered immediately, without being blocked until I release the mouse.
[Edit: In response for downvote for "not showing research," note the following (original) paragraph. Tried all suggestions I could find, mentioning the most common ones explicitly. Perhaps my research methods are unsophisticated; can you advise so that I could do a better job next time?]
Following suggestions on this site and elsewhere, I've tried adding and deleting an element from the DOM and toggling the display property of various elements, but without success.
Sample files are at https://github.com/obdurodon/drag. To run, clone and then open textual_correspondence_static_sample/test.xhtml in a browser (from the file system, so that it can find the CSS and JavaScript files to which it's linked). Grab a drag icon at the top of a column and pull left or right. Connecting lines repaint only on drop, but I need them to repaint immediately after every crossing (I'll worry about stretching them on mousemove later).
I think the reason is because you are giving the lines a stroke colour in endMove() (after your drawLines() call). But you are not doing that in the swapColumns() function. New elements in SVG have no stroke by default.
Related
Is it possible to restrict an Angular Drag and Drop element to a circular boundary?
Looking at the documentation below
Restricting movement within an element
If you want to stop the user from being able to drag a cdkDrag element outside of another element, you can pass a CSS selector to the cdkDragBoundary attribute. The attribute works by accepting a selector and looking up the DOM until it finds an element that matches it. If a match is found, it'll be used as the boundary outside of which the element can't be dragged. cdkDragBoundary can also be used when cdkDrag is placed inside a cdkDropList.
I tried changing the css (see stackblitz) to be circular but my understanding from the result is this only changes the appearance and not the boundary of the DOM element.
With everything in the DOM essentially being a rectangle does this mean circular or very close to a circle restriction is not possible?
https://stackblitz.com/edit/angular-gughvc
As far as I can tell, there's no direct way to do what you want.
However, you could probably monitor the drag, do a "hit test" for your circular boundary, and stop the drag yourself when the boundary is exceeded.
I did a quick-and-dirty test at https://stackblitz.com/edit/angular-ut9fgz
This stops the drag at the mid-point of the circle, but:
It doesn't just prohibit going past the boundary, it cancels the
drag.
Having a callback for every drag event (essentially every pixel
traversed) can be expensive - your "hit test" better be very
efficient.
So, this shows the general concept, but there's still a lot left to be worked out.
Besides the official documentation, the following pages might be helpful:
https://grokonez.com/frontend/angular/angular-7/angular-7-drag-and-drop-example-angular-material-cdk
Cancel drag on key press Angular cdk Drag and Drop
I have made a small app that allows the user to create rectangles, and drag them around.
The implementational details are that the "green" workspace area you see is a Marionette CollectionView
and when you are drawing boxes, you're essentially instantiating new rectangle models and rendering views for them. HTML-wise, the rectangles are child nodes of #workspace.
Here's a working demo (on dropbox since jsfiddle keeps failing me all the time)
From what I know,in order to avoid the creation of a new rectangle while I'm moving around an already existing one, I need to stopPropagation of the mousedown/mousemove/mouseup events (That's what I'm using in the first place to determine if the user is dragging, to acquire mouse pointer position, calculate rectangle properties, and append the rectangle view on mouseup)
The problem is that although I stopPropagation for mousedown/mousemove/mouseup, apparently the mouseup event doesn't fire and the rectangle keeps following the cursor even after the mouse button has been released.
Also dragging a rectangle around is not as smooth as I would expect, but a bit glitchy. I'm suspecting that there must be either something horrible that I've done (most likely), or a conflict between how I'm handling events and how jQuery and jQuery UI are. (I need to comply, but I don't know how).
Please enlighten me!
In the end I've decided to write a short jQuery UI plugin that would take care of all the calculations and would allow me better control over event handling.
For more information about what I ended up doing check this post
I implemented d3 slider control allowing to navigate through data serie displayed along time axis.
I'm trying to isolate/solve problem with drag events coming too seldom (more than one second interval), when data set is large enough (entire data array is inlined in html page, so page weights about 13 megabytes).
http://javaeedemo.pragmasoft.cloudbees.net/test/isolated-test1.html
Drag looks jumpy in chrome, but is smooth in firefox.
data array has only about 300 elements, and elements contains lot of data including nested arrays, but I only use one property in every element named 'end'.
I tried to reduce data array size, leaving same amount of elements, but only left 'end' property in every element, so this change doesn't impact functionality, only page size.
http://javaeedemo.pragmasoft.cloudbees.net/test/isolated-test2.html
With these changes drag looks much more smoothly on chrome.
Appreciate any help, including ideas about how to isolate problem. I tried to use Chrome Timeline, what I see there is that my onDrag handler executes very fast (matter of 1 ms) yet I still have substantial gaps between onmousemove calls.
Added:
I managed to find some almost working solution - I added drag behavior event listeners to raw mouse events instead, like
//var dragBehavior = d3.behavior.drag()
// .on("dragstart", onDrag.bind(this))
g.on("mousedown", onDragStart.bind(this));
...
Now it works much more smoothly, which makes me thinking that problem is somewhere in drag behavior code. isolated-test3.html has workaround to compare:
Of course I'd prefer using drag behavior, as it solves number of problems and supports touch events as well.
I'm developing an iPad app using PhoneGap and jQuery Mobile and I'd like to create a preview pane in a carousel. The preview pane would include a smaller version of each of the other panes, scaled so they fit inside the single pane. The panes are not static and can be updated at any time using WebSockets, and the preview should be updated simultaneously. There can also be any number of panes (although to keep things simple, assume an upper limit of 9). For performance purposes, assume each pane can have upwards of 200 DOM objects attached to it. To make it slightly more complicated, the carousel can exist on more than one different page.
I've been contemplating the best way to go about implementing this preview pane, and, before inventing a pair of Complicator's Gloves, would like to hear back from the community on any possible better strategies.
A couple methods I have been considering include:
Cloning each pane and then using a CSS transform to scale it to an appropriate size, based on how many panes there are, and then attaching the clones to the preview pane.
Store each pane as a jQuery object in a variable and draw each pane and the preview pane using that object (possibly necessitating redrawing the entire carousel every time there is an update, depending on how much effort I want to make identifying and updating deltas).
Repositioning all the panes so that they exist inside the preview pane when the preview pane is active (this might break the carousel, or at least make it look slightly bizarre as a user swipes a pane over but hasn't actually moved on to that pane yet).
Is there anything I'm missing? It would be nice if there was an easy way to "link" two elements together to make one mirror the other, but apply different CSS to one or the other (for zooming). I suppose it might be possible to do this by creating an event that would fire and then adding a listener to its clone, which would then copy the html of the updated element to itself (probably wouldn't be too terribly to difficult to write a jquery plugin to manage this).
Any better suggestions?
I am not sure what phonegap allows for as far as rendering options go, but my first instinct would be to take a screen shot of the relevant pane. Perhaps phonegap has this built in?
Another option is a javascript library which will clone the DOM and create an HTML5 canvas element. You can either then display the canvas natively, or convert the canvas data in to image data.
Here is one such library: http://html2canvas.hertzen.com/
Given the large number of elements needed, I would hesitate to clone those over and over again. However, if live previews are a necessity, that might be more efficient than using image files or the canvas. You could fire off the canvas draw function after major changes, but probably wouldn't want to do it after the end of every frame of animation.
I'm prototyping a thin client UI using extjs and am looking for an effect that will simulate a form/pane flipping over to reveal another form/pane. Its for a details view for an object that has two major sets of properties.
I found a flex component that can do this, and can even simulate four different forms on the faces of a cube.
Just a sexier, more fun way of doing what you can already do with tabs.
This particular effect may not be available on a cross-browser basis quite yet. Doing perspective transforms on a given DOM element is only possible in two ways that I know of:
1) Renderer-specific extensions, like Webkit's -webkit-transform
2) Rendering the DOM element inside of a Canvas element and then doing transforms on that
The problem with #1 is that it's clearly not going to be cross-browser. The problem with #2 is that you'd more or less have to write your own complete markup renderer for canvas to really get everything in an arbitrary DOM element in there.
(OTOH, I wouldn't put it past some ambitious and clever JavaScript ninja to have attempted #2, so though I haven't seen it yet, I wouldn't be totally surprised if someone else can point towards something like it...)
I would stick with the tab solution if you want to get your project done within a reasonable time. This does not exist for ExtJS - the one in Flex does a 3D effect. The only solution close is to just have content in 4 cells of a table that slides into view (according to the direction of the arrow you used), within a DIV, and have the overflow property set to hide, so you can mask out the other cells and show one cell at a time. Then use the animation (fx) functions to slide the content in and out of view, perhaps with some arrows you hover over or click.