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
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 a calendar-like view that shows a table with one column per day of the week (see this image). Each row represents a specific thing that can be booked for a time. The idea is now that a booking can be extended by dragging the outer edge to the next day in the table, or shortened the same way. The active booking has a span on each side of the cell that is supposed to be the handle for dragging.
My main problem now is that the usual drag & drop features in browsers don't seem to fit my situation. I don't want to drag something and drop it anywhere else, I just want to drag to extend the item.
Is this still something that can be done with the usual HTML5 drag&drop feature or some generic drag&drop library? Or is there any other way to achieve this? Any pointers on how to approach this problem?
I'm using React for this, which might make some solutions difficult to integrate if they manipulate the DOM directly.
ummm not sure what to do here , I thinks its unlikely the link will change soon , I can describe the repo 'Allows individual or group selection of items using the mouse. Click and drag to lasso multiple items, hold the cmd/ctrl key to select non-adjacent items'. I can briefly describe what the lib code does: uses keydown, keyup and mousedown listeners to create an overlay and detect covered nodes in the DOM .
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.
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.
Consider the scenario where a user touches the screen, holding the first finger down. The user then taps the screen sequentially in two separate locations with a second finger. I want to respond to this as three independent taps, and all I really care about are the initial tap locations.
I have tried using touchstart, but I can't figure out how to not reuse the first touch. If I look for changes in the length of event.touches, I don't pick up the second (final) tap.
Can someone suggest a strategy for responding to each touch individually? I am guessing it is quite simple, but I can't quite figure it out.
If you're using JQuery or Zepto JQTouch is a good plugin that wraps up touch events nicely for you. If you're interested in doing this at a lower level, you could always take a look at how they've done it.