jqueryUI: Drag element from dialog and drop onto main page? - jquery-ui

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.

Related

Vaadin14 Custom Grid Drag and Drop

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

How to add a label and edit controls inside an already existing groupbox in a design mode using delphi

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.

How to handle drag start event in vaadin?

I have 10 layout .I want to allow all layouts to drag over the other layout.But when layout is dragging then on the hover of any layout,background should be white so it look like as dragged component can
have space to drop and layout on which dragged component is going to drop is adjusted just below.
So,I think i need on drag event in vaadin.
I think Vaadin tries to tackle the scenario at a higher level of abstraction. I'm referring to section 11.12.4 "Accepting Drops" in https://vaadin.com/book/-/page/advanced.dragndrop.html
Vaadin automatically handles the hovering and visual feedback while dragging the component over a possible drop target. Your code defines the accept criteria for the drop target.
If required you can style the visual "drop hints" yourself, adding CSS styles to the container of the drop target.

draw a icon on Treeview node on mouseover, when clicked display popup menu

using delphi ex-5
as of now, I can display the popupmenu on right click of a selected node
is it possible to display a icon on a treeview node (right side) on a moveover? When the icon is moused over, display a popupmenu?
thanx
EDIT: Inclusion of two screenshots to better convey my need (Yes, this was taken forom a webpage - it is what I am trying to do)
https://dl.dropboxusercontent.com/u/73677254/Delphi%20Demos/screenshot1.png
https://dl.dropboxusercontent.com/u/73677254/Delphi%20Demos/screenshot2.png
If you want the icon on the left side, you can use the TTreeNode.StateIndex property. But to put an icon on the right side, you have to owner-draw the TTreeView nodes instead.
Either way, use the TTreeView.OnMouseMove event to keep track of which node is currently under the mouse at all times, and when you detect a different node then you can reset the StateIndex of the previous node and update the StateIndex of the new node, or trigger a repaint and draw the icon only on the new node, depending on which approach you take.

Bring Control to Front when Selected in the Structure Pane

I would like to build a Wizard component, where I can guid the user through different pages. When the last page is reached, an action is performed.
That component should work similar as the TPageControl, where I can create sheets at design-time. Creating that 'sheets' is already done, but my problem is, that the last added sheet is always on top of the other sheets, and I cannot select another one anymore (which are behind). In the TPageControl component, I can select a sheet in the Structure Pane, and it comes to the front, where can I put controls on it.
And this is my question: How can I bring a control (my wizard sheet) to the front, when it is selected in the Structre Pane?
I have to override the TWinControl.ShowControl function. That function is fired when you click in the structure pane on the child control. Then, I just need to invoke the BringToFront function of that child.

Resources