Vue-draggable-next: increase detection range for empty list - javascript

I am using Vue-draggable-next along with Vue 3 to implement draggable lists. My application sometimes requires users to drag items from other lists into initially empty lists. I found that the dragging detection area is determined by how much space its elements are occupying: when there is no item in a list, it is super frustrating to drag one into the list because the detection area is soooooo small (only a dozen pixels at the start of the list on the page). This is demonstrated by the following GIF:
Is it possible to somehow set the detection range height of each list?

with this property you can expand the gap empty area:
:emptyInsertThreshold="50"
The parameter I received is positive numbers, try it, it worked for me.

you can easily solve this problem by adding a minimum size to the draggable, min-heigh: 200px this is because the drop zone is not specified and needs a min-height to be set

Related

Make elements move across smoothly when changing position css

I am trying to create a number flip effect using the number-flip npm package as a basis. I wish to make it similar to Robinhood's stock ticker (when scrubbing across a stock chart).
I have been able to customise the base number-flip package so that leading zeros and commas are removed when not necessary. However when the number of digits increases, the rest of the digits simply jump over to the right in position. I would like them to be smoother when moving over.
The current way I do it is, any leading zeros/commas are simply hidden using the position property and then if they are required, they are made visible again. This hiding/unhiding causes all the visible numbers to jump across and make it unsmooth.
I have linked code sandbox below:
https://codesandbox.io/s/nostalgic-taussig-ymfn9?file=/src/index.js
Thank you very much for your help

Calculating width and height of an element to be on one screen, unknown number of elements

I have project where I would like to display sensor readings from the building. It contains temperature, date and name of the room. It is in one small simple square.
I would like it to be displayed on the TV monitor( I am unaware of what the resolution will be, but that can be calculated with JS).
Problem is, I don't know how many readings there are going to be and I need to show them all on the screen(Since it is going to be on monitor without possibility to scroll). I don't know how to calculate their dimension so they would fit. I didn't find any miraculous css property for this so I am fine with creating some JS function. However, I don't have an idea where to start. I would know the number of sensors and resolution, that is all. This number of readings will change over time though.
Any JS libraries that could do this? If none, what function should I write?
Edit: Touffy's solution works great! I found this article for others in needs: Dynamic number of rows and columns with CSS Grid Layout and CSS variables
You can probably decide which browser will be used for this sort of application, so you can pick one that supports CSS Grid Layout. With that, you can do what you want without any JavaScript by specifying the grid container to take the whole viewport (100vh and 100vw), and letting it arrange the grid items with the constraints you like (number of columns, spacing…).

jquery slider with multiple handles (dynamically add and remove handles)

What I want to achieve is to make it possible to the user to define as many ranges inbetween a start-value 0 and a max value, i.e. 1000. I thought about how to do this in the best way and I came up with either idea:
Either I could dynamically add and remove sliders on the fly to the page. Make the min-value of the first slider fixed to 0. And somehow link them, i.e. when changing the upper-value of the N-th slider, automatically adapt the lower-value of the (N+1)th slider and vice versa. Problem is that it's some hassle to get this working as I need to also adapt the previous slider (N-1) and next slider (N+1) when removing the slider N inbetween.
Then I thought of the following:
Have ONE slider with a fixed lower-value to 0 and with at least two handles, where the user can add and remove handles on the fly himself. There wouldn't be any gaps allowed, i.e. every pair of consecutive two handles would always define one range. Something like this:
jsfiddle.net/NkjQr/1781/ (this example would define two ranges) with fixed value at 0 and on the fly add/remove handles. Is this possible? Couldn't find any jquery plugin to do this easily...
Or do you know an even better solution? Im looking for the one which is the most easy to implement myself.
Thanks a lot

relative z-index'ing

I'm trying to design a map using images that overlap in an isometric format.
Right now, i have 2 different designs, each one fixes the other's issue. Here is the current setup:
http://mc1.empirebattles.com/map/maplayout.html
The display on the left has issues with the vertical overlap, and the display on the right has issues with the horizontal overlap.
I know that the reason is due to the fact that when a z-index is applied to the parent container, the subsequent z-indexes applied to the children is localized inside the parent.... but i still need the 'row' effect to span across the multiple parent divs.
I know one solution is to just not assign a z-index to the parent divs, and just assign ascending/descending z-indexes to each row, but in the final product, the parent divs will be created dynamically, and I'm trying to avoid having to do calculations at each row for relative z-index....
I cant think of any other way to do it though... anyone else have any ideas on how to apply z-index relatively?
I have never found a way to interweave z-indexes for things in different relative or absolute containers.
I think of it like two books. In real life, you could kind of half-open both books and wedge them together so some of the pages are in between each other, like this:
http://4.bp.blogspot.com/_e3GqvYXugb8/Se11YQaT-YI/AAAAAAAAAGQ/ljKewd_WMj0/s320/PhoneBook.jpg
In CSS, this isn't possible.
I think the most straightforward thing is to decide on an absolute frame, like the screen size, or the whole map, and position and z-index all objects against that single parent. Then you can treat all game objects like... well like independent objects and not worry about these odd row containers and other layout specific elements.
A way to avoid calculations is to reserve ranges ahead of time for each row. Let's say you can have a max number of 100 units in each row then elements in each row will get an offset of 100*n where n is the row number.
Is that workable for you?

Creative ideas for display large amount of text on web page

I have a 2 column table in a database 1,000 rows long(All integer data).
The display will allow for the user to delete a certain range of data from the table.
What I am looking for is a creative way to display all the data so the user can get to different parts of it really fast. Maybe displaying different chunks at once, represent with bar graphs or zooming the scope in/out would be really cool.
Any ideas,suggestions, examples at all are appreciated. Please just throw them out here for brainstorming.
Note: I am limited to JS, xml, html and C
Thanks!
By mouse scroll resize the text.
Add drag'n'drop for moving text block.
Example: user resizes it to a smaller chunk by mouse weal then moves it by using drag'n'drop.
It is possible to implement such thing with jQuery/JavaScript
Use a double slider with a min and max display range. Here is an example of one based on MooTools. Moving the slider controls will adjust which range of values are displayed in the table.
Could implement something that functions like google maps where you can easily zoom in and out and set points wherever you need that stay when you change elevation.
you can format the html with <h1>, <h2>, <h3> and <p> tags, and use jquery to collapse the paragraphs, leaving headings of major sections.
I did this with documentation i was working on and it worked out great.
I'm a fan of the JavaScript bookmarklet demoed in this video: http://www.youtube.com/watch?v=GPZ8YNgyl_I
The bookmarklet itself is available here: http://t_trace.wed.macserver.jp/overview.html
If you have used WinMerge, you could develop something like the location pane in the left that shows a full preview of the changes in files. It can be used to navigate very fast
Here's a screenshot. (Image too large to inline it here)
Assuming the integer data come in ranges, a common approach is to show how much data there is in each range as a horizontal bar. You click the range to zoom in, until you see the actual data, or click the X to delete.
ID Range
[X] 1-1000 xxxxxxxxxxxxxxxxxxxxx
[X] 1001-2000 xxxxxxxxx
[X] 2001-3000 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
A further refinement is to use colour on the horizontal bars to show data density. For instance red = lots of data, yellow = less

Categories