Drag and Drop - Create a new Grid Row while dragging - javascript

I am using Sortable Grid from here to perform a drag and drop in my app. However, I want to dynamically create a Row while dropping.
I mean say if there are two rows in Sortable Grid. If user drags an element and thinks of creating the third row before dropping it, then he/she should be able to do it by dropping below the second row. How do I do it?

Use a div below the boxes, and use ondragenter to prepare the program for a new row. I don't know how the plugin works, but this should help. Make the div however high you want, and that will be the distance beneath the list that can be selected (I recommend the height of the grid boxes)

Related

Bokeh - how to create a hideable sidebar

I have a bokeh project that looks very similar to this https://demo.bokeh.org/movies
Now I would like to make it possible to hide/unhide the column on the left.
I know how to hide it following the solution from here https://discourse.bokeh.org/t/hiding-bokeh-elements/4335/2
The problem is now where to put a button which would show the column again.
I thought of the following:
When hiding the column make another button visible which will allow to unhide the column. This is easy but adding a new widget to the layout would defeat the purpose of hiding the column since either way I would have a big button visible on the screen affecting the position of the figure. Is there some way of adding a new button widget which does not affect the whole layout?
Adding a new tool to the figure which would call the unhide the column. I am not sure though if this can be done easily.

How to create two dropable using jqueryUI

I m new to Jquery UI drag-drop and sortable,
I want to create one list and one container, specific elements from the list can we drop to the container like element1 and element2.
After dropping elements to the container it will make another dropable container inside the previous dropable container.
from list remaining elements can be put inside this new container now.
currently, i m able to drag and drop elements from list to container,
Needed help for other features, I read API documentation of jquery UI drag-drop and sortable, did not get anything from it.
any kind of help will be appreciated.
Thanks.

Draggable background/area in vis.js timeline for selecting a time period

We would like to have an editable time range on the vis.js timeline in the same way as an event can be edited. So 1) the user could drag backwards or forwards in time if they grab by the middle, and also 2) edit the length by grabbing and dragging either and of the area.
The editing and their callbacks work very well on the items themselves, but not on the backgrounds. The goal is to let the user to select an interval.
I think it's not possible to drag backgrounds or change their size like the items. But what you can do is to add new items with a field to differentiate them from others items and with custom css, you can modify them to look like backgrounds and the drag and resize will works on these "new" backgrounds.

How to drag and drop selected row(s) in JqWidgets grid

I am displaying task list using JqWidgets grid. Now I have requirement that user can prioritize there task by drag and drop the selected task (one or multiple).
As you can see in the attached grid, user has selected multiple item from grid. Now user can priortize the items in the grid with simple drag and drop event.
I am sharing a demo JSFiddle link
Can you please help me to do that...
For reference grid see this link
I will appreciate you if you share a nice example of it to do the same in JqWidgets grid
Thanks,
~Chandan
This example: Drag jQWidgets Grid Records shows how to drag and drop records in jqxGrid. In your case, you will have to use the same approach, write your own logic what happens on Drop and I suggest you to use the jqxGrid's "updaterow" method to update existing rows on Drop.

Using jQueryUI to build both vertical and horizontal drag and drop interface (includes almost-working jsfiddle example)

I'm trying to use jQueryUI to build a drag and drop interface that allows both horizontal and vertical drag/drop.
I create horizontal drop zones above, between and below any existing rows. I allow vertical drag and drop of elements with jQueryUI Sortable. And I can drag and drop existing elements to either a new row or to an existing row.
I set up this jsfiddle with what I have so far: http://jsfiddle.net/travisrussi/DzS8d/2/
These are the issues I have:
Dropping a second element on a new row in the contentPane causes the element to visually revert even though it drops successfully and the draggable object has 'revert' set to 'invalid'.
Replication steps (using the jsfiddle)
Drag Option 1 to the contentPane.
Drag Option 2 to the top droppable row (above where Option 1 is).
Expected Behavior
Once Option 2 has been dropped, it should not visually revert back to it's original position.
Dragging an existing element in the contentPane causes it to jump to the top left corner of the screen.
Replication Steps
Drag Option 1 to the contentPane.
Mousedown on Option 1 in the contentPane.
Expected Behavior
Mousedown on Option 1 should position the helper element relative to the mouse cursor.
I isolated this issue here: Connecting a Draggable to Sortable causes helper element to jump
Dropping a new element in an existing row with an existing element in the contentPane causes the new element to duplicate with one new element in the existing row and one new element in a new row above the existing row.
Replication Steps
Drag Option 1 to the contentPane.
Drag Option 2 to the same row as the first step.
Expected Behavior
Option 2 should be added to the existing row only.
Any ideas on any of these issues?
I basically rebuilt the interface and got it to work properly.
Here's a link to the working demo that allows both vertical and horizontal drag and drop: http://jsfiddle.net/travisrussi/EGNWU/
In this demo, I don't try to show/hide the horiztonal drop zones (they just stay visible).

Categories