I have a TreeGrid with a hierarchy and I want to add a Drag and Drop functionality to it.
My problem is, I only want two types of elements to be draggable, and they can only be dropped on into these two types and the root element.
So far I could manage to only allow these elements to be dragged, by returning the dragStartEvent when the element is a different type of element.
But how can I customize the allowed dropTargets when it is a Grid?
Right now the user can drop the element at any other grid element, and the only thing I can do is show an errormessage if the dropTarget is not the desired type, but this is not a good solution, they should see while dragging the item that its not droppable there.
The grid has a Drag and a Drop Filter that you can use to decide if drag or drop.
void setDragFilter(SerializablePredicate<T> dragFilter)
Sets the drag filter for this drag source.
void setDropFilter(SerializablePredicate<T> dropFilter)
Sets the drop filter for this drag target.
Please checkout the documentation https://vaadin.com/components/vaadin-grid/java-examples/drag-and-drop
Related
As one of my requirements, I have to add a label and edit field to an existing groupbox in delphi. But how many times, i add a label inside an existing groupbox it disappears or it wont get added. Is there an alternative way to do this?
Am not sure why but am able to add edit but not label
I'm going to take a wild guess here. You are adding new components without first selecting the group box in the design surface. When you do that the component becomes a child of the form and disappears beneath other controls.
Here's how to do it:
Click on the group box on the form design surface,
then double click on the label in the palette.
Alternatively:
Single click on the label in the palette,
then single click on the group box on the form design surface.
If you do get the component parent/child relationships messed up, you can inspect them in the Object TreeView (open this from the View menu). If the relationships are wrong, drag the child controls around in the Object TreeView, and drop them into their desired parents.
I've implemented drag and drop OK with jQueryUI draggable and droppable.
For the less savvy users, I'd like to also offer a visible "move" button. When they click this button, the element would be picked up, and when they click again on a drop target, it's dropped. So the same as drag and drop, but started with one click and dropped with another.
I know it would be possible to do this with separate code, but I'd rather not reinvent everything for a slight variation. Is there a way to get jQueryUI to do this?
The only thing I found is calling the trigger method of the draggable, but you have to pass a mousedown event...
Thanks
See my answer on this other question. If you change it so instead of
$("#headerDiv")
.mousedown(function(event) {
x = event.pageX;
y = event.pageY;
$(this).parent().addClass('movable');
})
.mouseup(function() {
$(this).parent().removeClass('movable');
});
bind to click and implement a toggling mechanism to decide if you are beginning the drag (mousedown equivalent) or ending the drag (mouseup equivalent) you should be most of the way there.
I would use .animate to animate the object to its target. I have done this before with a game. For example you could specify top and left coordinates for the element to move to onClick of the button.
How can i implement an interface like BB Messenger showing a tree with a list of complex field items that are shown only if the tree item expands.??
Use a ListField for the contents of the collapsible area (you control how each row is painted), and use some other focusable field for the header. Add both to a VerticalFieldManager. When you click on the header once, remove the ListField from the Manager. When you click on it again, add it back.
I think you are talking about tree view. for that you can try this.
Create a field to display a tree view
I am trying to create a drag and drop system consisting of a workspace and a "palette". The workspace currently consists of re-orderable list items, and I want the palette to be a floating window from which I can drag items and add them to a specific position on the workspace.
I am currently using the jqueryUI "sortable" plugin for the workspace and the jqueryUI "dialog" plugin for the palette.
However, I cannot drag something out of the dialog and on to the main page. When I try, the item being dragged disappears as it crosses the boundary of the dialog (which makes sense). What can I change so that items will remain visible as I drag them out of the palette and allow me to drop them onto the main workspace?
Alternatively, are there any jquery plugins that offer this sort of drag-n-drop palette as a primary feature?
If dragging items from the palette duplicates them, without removing them from the palette, then the answer is the appendTo option of the draggable plugin. This specifies the container to use during dragging. In my case I created a new div outside the bounds of the dialog and specified that as the dragging container. This allows the element to be drug beyond the bounds of the dialog window.
To move items from the palette onto the workspace, I used the techniques from this similar SO question.
There are two sortable UL elements which are linked to each other via 'connectWith' options so that items from one list can be moved to another list and vice versa. I'm in need to prohibit from moving/dragging some items to another list while still letting them to be draggable within their own list. Is there any way to implement such behavior?
For now I can only restrict items from dragging using 'items' option of those sortable lists but while this prevents the desired items from dragging to another list this also prevents those items from dragging within their own lists (which is bad).
The way I was able to get around this is by using the li elements onMouseDown and onMouseUp events. When the mouse is clicked, I changed my CSS class (or whatever else) so that it falls out of the items list.