When you are dragging an element using the touch events (DnD on touch screens), how do you detect that the object that you are dragging is over another object?
With jQuery is easy, add "collide: 'block'" or "collide: 'flag'" when you create a draggable.
http://plugins.jquery.com/project/collidable
I haven't found any direct solution for this. One can have draggable element positioned "outside" dragging finger, but this didn't work in my case.
In my case, I had a grid-like element with fixed size child elements. Therefore it was easy to compare pageX/pageY of touchmove to the parent element and count the current element index by dividing the result with their dimensions.
Related
I have a wrapper div which includes several children all of which are 100%/100vh height. I want the scrollwheel to stop at each child element so that the user won't be able to use the mousewheel to scroll at the end of the page bypassing some of the child elements.
Any help should be appreciated.
You can try scroll-snap-type and scroll-snap-stop:always but im not sure if you are looking for that or to completely disable scrolling at certain child element.
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
Problem
I am having problems with my sortable list with several items of various height. The problem occurs when I'm trying to move a larger item to the first or last position (which both have smaller objects). If I succeed currently depends very much on where on the larger item I click and start dragging.
If I want to move the item to the smaller bottom position I must click close to the bottom of the item for it to work, and if I want to drag it to the top position I must click closely to the top. But I want to be able to drag the item by clicking anywhere.
Some additional information
The items cannot be dragged outside the parent and the parent is only as large as it has to be and a scroll appears if it's larger than it's container. So it seems that I cannot drag the larger item past the first(smaller) item if I don't drag it in the top part of the item.
I've been trying to fix this by using cursorAt and using top:0 and another test using bottom:0 But it doesn't seem to make any difference (so I might have misunderstood how to use it). I am currently using tolerance: pointer.
I can bypass the problem of not being able to drag the larger item to the last position by temporary during the sorting increasing the height with the height of the dragged item. But it doesn't always work and its not a very good solution. And the problem of not being able to drag it to the top still appears?
I cannot change the JQuery code as in jquery-sortable-with-containment-parent-and-different-item-heights
Question:
How can I drag a larger item to the top or bottom position while allowing the user to click anywhere on the item?
Thanks for your help!
This might not solve your problem, but I thought I'd share the results of some experimenting I did today. I needed to make a sortable photo gallery with inline-block pictures of varying widths, and found that moving wider photos would be really hard work because the placeholder was smaller than the item I was moving. I ended up using this:
container.sortable({
placeholder: "photo placeholder",
start: function (event, ui) {
ui.placeholder.width(ui.item.width());
}
});
The custom placeholder classes are there to ensure the placeholder isn't hidden by default, and the start event ensures that the placeholder is the same width as the item you're about to move. This worked very well for me, and in your case, substituting height for width might work.
I also tried using containment as you have done, and found that it sometimes makes things much harder depending on the items in the row. Like you have explained, including tolerance: "pointer" helps to alleviate the issues, but if possible, removing containment generally makes the UI more forgiving.
I'm using jQuery UI. When I drag element in the iframe and I move mouse out of the iframe, the element is still in the draggable state. So when I move mouse back to the iframe, I can still drag it, like I would had left mouse button down.
How to avoid it? So that if I start to drag element, it stops when I go out of the iframe in the last draggable position?
You need to trigger a mouseup() when your pointer leaves the iframe so that the element being dragged is no released.
$('body').one("mouseleave", function(){
$('body').mouseup();
});
There were more questions asked pertaining to my solution, so please refer my question posted here for more details
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.