Prevent dragging before vertical line React-beautiful-dnd - javascript

I want a little help from you. I'm stuck with a problem using react beautiful dnd library.
I want to prevent dropping items before the red line and before the red line all items should not be draggable also. You can say kind of a timeline task. The red vertical bar shows the current time and before the current time no items can be dropped.
Here is a chunk of my code to take a look:
If you have any suggestions or ideas please comment. Thanks

Related

Pin an element in timeline after moving it to specific place using scrollTrigger

I am new to scroll Trigger.
I want to achieve 2 things in this demo. I will appreciate a little help here. I am trying it for the last 24 hours but not sure what I am doing wrong.
My Pen
`https://codepen.io/amirkhan1992/pen/mdLJKOo`
First I want to pin the Do More word after the scale down and scroll up the right side list.
Second, when the do word come comes in from of list item it should change the color. just like this demo.
`https://codepen.io/mikeK/pen/poPwzae`

3 draggable objects with different widths and heights. Align them all horizontally and vertically on the page after buttons click

What i want that are:
Create three draggable objects with different widths and heights.
Create one-button which aligns them all horizontally and another that aligns them vertically on the page.
Few things i want to share.. Well i have googled similar to this task for few hours. So far i got something like which for only one, one & only single object drag n drop. I don't find anything for multiple objects. I tried to complete this taks on those existing demos. But couldn't not successful.
Can anyone help me? Please. One more thing, it will be better if the solution is provided on jsFiddle or codePen instead of here's code snippet.
Thank you in advanced.
`http://jsfiddle.net/maniator/zVZFq`
Please have a look. Although it will not solve your task completely (the way you described) but partially (1st list point) solves. Hopefully, it will push you to complete the task.
Updated:
Demo i have done the task for you. Hope this will satisfy your task completely.

How to use drag and drop functionality both columns and rows in my React Table - ReactJS

I have created a table in React Table. I want to add both drag and drop functionality on columns and rows. How can I do this?
Here is my CodeSandbox Sample - https://codesandbox.io/s/2wp7jk23kr
Here I have got a Code Sandbox for drag and drop rows - https://codesandbox.io/s/1844xzjvp7
Here I have got a Code Sandbox for drag and drop columns - https://codesandbox.io/s/5vxlnjrw1n
Being a beginner In React, I'm not able to integrate this three sandboxes. Can someone fork a good example on CodeSandbox on how to add both drag and drop functionality on columns and rows?
Please use my React Table data columns - https://codesandbox.io/s/2wp7jk23kr
It's not that hard to make it, but still no convenient way yet, I had a try and let's see the result in sandbox: https://codesandbox.io/s/quizzical-leakey-o5h8z
Then let's see what's going on in Table.js
1.When you start dragging, you do not know which direction it is going, so I just hide the snippet (by setting it to empty div)
2.When you first drag it into another cell I got to know the direction, and then lock the direction inside dragState.direction
3.When you drag it into an cell (including first time in step 2), you need to show the changed data, like rows = offsetIndex(dragState.row, dragState.dropIndex, rows), notice it is different depends on dragState.direction
4.We highlight the row/column we are dragging, with opacity: ....
5.Finally on dragEnd we notify parent component what have changed
It's not good enough yet, specially when the drag is cancled. So don't rely on these code too much, find your own way based on this idea

How can I add a grid of shapes to a slick carousel?

I'm working on a class project at the moment and I'm having some trouble with the front-end part of it.
What I'm trying to do is implement a grid of hexagonal like shapes (I'm using this example by web-tiki), that works exactly as I want when resizing the screen.
I want to put this grid in a carousel-like div, that adds a page with the same number of items when resizing, instead of stacking them underneath, thus taking up more space downwards.
I've been through a lot of research, but none of the examples given seemed to fit my case. Can anybody give me an insight on how to do that?
Edit: Based on Rustyjim's comment, I actually edited the carousel's js file to fit my needs, so consider the issue solved. Thanks for the responses!

Vaadin DCharts renders too early when using setExpandRatio

I am currently experiencing a problem using the dChart widget addon (wrapper for jqPlot) in Vaadin v7.5.2. Here is a snippet of the code that is giving me a headache:
ComboBox comboBox = new ComboBox();
DCharts chart = new DCharts();
VerticalLayout content = new VerticalLayout();
content.addComponent(comboBox);
content.addComponent(chart);
content.setExpandRatio(chart, 1.0f);
setContent(content);
chart.setDataSeries(dataSeries).setOptions(options).show();
The problem is that when I use setExpandRatio, the chart is overflowing from the container when the page is loaded. Here is a picture to illustrate:
When I use web developer tools to hide the ComboBox and remove the margins, the plot looks OK. So it seems the plot gets drawn before the expand ratio is set, as if it doens't know the ComboBox is there.
However after selecting another item from the ComboBox (which loads another DataSeries), the chart is drawn within the expected boundaries and does not overflow. Also, when not setting an expand ratio or without adding the ComboBox, everything works as it should.
Has anyone ever experienced similar issues, or has any idea what I could do to fix this? Any help is of course greatly appreciated!
I know this is not an ideal solution, but I somehow managed to solve my problem by using an AbsoluteLayout, and drawing the plot using top: 40px. After that I add the ComboBox to the layout. That way the plot always gets drawn on the correct position.
Just leaving this here as a temporary solution, so if anyone has a better one please do not hesitate!

Categories

Resources