Hi am using drag and drop from Jquery, and what I want to try and simulate is the drag and drop except during the drag motion I don't want the element to actually move from its place.
In the example here : http://jsfiddle.net/2LN5G/ when you drag the "Drag me to target" it is moved from the possition and reverts back when it is dropped. I want to still show "Drag me to target in the current position and still show the "Drag me to target" moving with the cursor. Is this possible ?
Take a look at the visual feedback example on jQueryUI.com.
Basically, you want to specify the helper option when calling the .draggable() method.
$(".draggable").draggable({
helper: "clone"
});
Related
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
I'm looking for a way to draw a rectangle in a single drag movement, so the user click and hold the mouse pressed then move the mouse and the rectangle is painting as he go and the drawing is finished when he stop pressing the mouse.
Currently it's done using mouse click -> drag -> mouse click again to finish, not that intuitive.
I'm using the latest OpenLayers 3.
Thanks!
The functionality asked for is already present in latest openlayers version (v3.19). Use ol.interaction.Draw.createBox() to create a rectangle with 2 clicks one for start and another for end. See the below example for more details
http://openlayers.org/en/latest/examples/draw-shapes.html?q=draw
You can create your style for the rectangle by creating style object and declaring it in ol.interaction.Draw().
Instead of using the built-in interaction use an instance of https://github.com/openlayers/ol3/blob/master/src/ol/interaction/dragzoom.js but pass in an option/condition to not use the shift key. Here are the conditions https://github.com/openlayers/ol3/blob/master/src/ol/events/condition.js
Have you looked into the DragBox interaction? This will give the user an outline of the box as they are drawing it with click, drag, and release being the interaction.
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.
All of our forms tend to have things get a few pixels out of place because when we click a component to modify the properties, there is a tendency to have the component move if the mouse is still moving the tiniest bit when we select a component.
Is there a setting that makes it so you can't move a component that isn't already selected? (Requiring a second intentinoal click to actually move things.)
You can enable "Lock controls" from the "Edit" menu, then it won't move when you click it, but it will of course remain locked also at the second click.
However, at least it will save you from the accidental moves just because you need to select the control
I find uncheck (use designer guidline) can prevent the problem,
but you will not see the alignment line.
tools->options->Form Designer
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.