If I scroll a page the currently dragged draggable stays in the same position. This leads to the finger not being above the draggable anymore. Is there any way in which I could update the position of a draggable to the current touch location without removing the draggable functionality?
My setup is rather complicated using iScrolls scrollTo method for Scrolling and jQuery-Ui-Touch Punch for touch support, but this should apply to other cases of draggable and touch/click position-mismatch as well.
update: function (event, ui) {
var data = $(this).sortable('toArray').toString();
//use ajax to update the position
}
Related
Please have a look at
www.jsbin.com/wigokojina/1/edit?html,css,js,output
I've added custom svg icons to the konva transformer, but the middle rotator icon is draggable even if i set draggable to false. The two other icons are fine and as expected, as far as dragging is concerned.
My questions are:
How do i disable the dragging for the rotator anchor, so that the icon doesnt move?
How do i disable all event handlers for an anchor, and add one click event? Ive tried shape.off('dragmove') etc. The only thing that helps is setting listening to false, but then im prevented from adding a new event listener. I want to disable all event handlers for the top right anchor, and add one onclick listener afterwards.
Is it possible to add the icons to the shape itself using fillPatternImage? Instead of adding the icon as a new shape like im doing. If its possible, please provide an example using the jsbin.
Thanks very much :-)
At the current moment konva#4.0.16 doesn't support fully customized Konva.Transformer. But you are making a good attempt.
How do i disable the dragging for the rotator anchor, so that the icon doesn't move at all?
You can reset the position in transform event (almost as you do it). But at the current moment, for performance reasons, inside transform events all anchors has "old" positions. So you see dragging of the icon from rotater anchor. To fix the issue we can force update a transformer:
circle.on('transform', function(){
transformer.update();
for (var button in buttons) {
var selector = button.replace('_', '-');
var shape = transformer.findOne('.' + selector);
var icon = transformer.findOne('.' + selector + '-icon');
icon.position(shape.position());
icon.x(icon.x() - 5.25); icon.y(icon.y() - 5.25);
layer.batchDraw();
}
});
How do I disable all event handlers for an anchor, and add one-click event
It can be something like this:
shape.listening(false);
icon.on('click', () => {
alert('delete');
});
Demo: https://jsbin.com/galetahara/4/edit?js,output
I need to keep the scroll offset of an element in sync with another (the window actually) and I'm having trouble doing so during the inertial "roll off" phase of scrolling on Mobile Safari (iPad).
I have a couple of divs with position:fixed; overflow:hidden and I need to keep their scroll offset in sync with the window's one (meaning the entire body scroll.) Usually I'd code it like this (jQuery):
var $win = $(window),
$div1 = $(...)
$win.scroll(function() {
$div1.scrollTop($win.scrollTop())
})
But testing the interface on an iPad, I noticed that the div was not being updated neither during the touch phase, when you are dragging the virtual page with your finger, nor during the inertial phase, when you let go and the page slows down to a stop.
I solved it for the dragging phase by registering the handler for the touchmove event as well as the scroll one.
But I can't find a way to solve the problem for the inertial phase. The div stays still (and goes slowly out of sync with the rest of the page) until the inertial movement comes to a full stop, when the scroll event is finally fired and it skips into position.
Here's a working demo.
Try to scroll it on an iPad to see the "inertial scolling" problem. Unfortunately I couldn't get it to work on jsFiddle, due to the iPad's weird behaviour with iframe scrolling.
If I could just run a polling during that phase, I could keep a semblance of synchronization between the two elements. I've tried with setTimeout, setInterval, and requestAnimationFrame, but neither of them fires during the inertial scrolling phase. It seems like all Javascript stops during that phase.
Questions:
Is there any touch or scroll event fired during the inertial scrolling phase?
Is there any way to run a Javascript callback during that phase?
Is there a way to sync the scroll offset of two elements (either X or Y, not both) using CSS or some other technology other than JS?
OldDrunkenSailor beat me to suggesting iScroll.
Unfortunately, out of the box iScroll just replicates the same problem as native inertial scrolling -- there's no event handling during the inertial phase.
Here's a version of your demo with a monkey-patched iScroll to add a custom event that fires even during the inertial stage: https://dl.dropbox.com/u/15943645/scrollingdemo.html
Works great on my 2nd gen iPad.
JS:
// Disable touch events
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
// Patch iScroll for position change custom event
iScroll.prototype._oldPos = iScroll.prototype._pos;
iScroll.prototype._pos = function(x, y) {
this._oldPos(x, y);
if (this.options.onPositionChange) this.options.onPositionChange.call(this);
}
$(function() {
var $win = $(window),
$div_cols = $('#cols'),
$div_rows = $('#rows'),
$div_body = $('#body')
// attach scrolling sync handler and execute it once
function sync_scroll(e) {
$div_cols.scrollLeft(0 - $div_body.position().left);
$div_rows.scrollTop(0 - $div_body.position().top);
}
// initialize iScroll on wrapper div, with position change handler
var myScroll = new iScroll('iscroll_wrapper', {
bounce: false,
onPositionChange: sync_scroll
});
})
CSS:
#iscroll_wrapper {
position:absolute;
z-index: 1;
left: 168px;
top:77px;
bottom:0px;
right:0;
overflow:auto;
}
#body {
position:absolute;
z-index: 1;
width: 2046px;
height: 3376px;
}
Note only the body responds to touch events, but you can extend the technique to the rows and cols divs for the reverse relationship.
iOS actually freezes DOM manipulation and Javascript while inertial scrolling is happening. Here is a simple demo that I made to illustrate the difference between scrolling in a normal desktop environment vs the iPad: http://jsfiddle.net/notjoelshapiro/LUcR6/. This code only has this JS in it:
var num = 0;
function updateNum(){
num++;
$('#awesomeDiv').text(num);
}
$(window).scroll(updateNum);
On scroll it increments a number and displays it on the bottom of the page. You'll see that the scroll number at the bottom of the screen is only being incremented when the inertial scroll has stopped. If Javascript was acting in the background it wouldn't refresh until the scroll ended but the number should be incremented higher.
So to answer your questions specifically:
Is there any touch or scroll event fired during the inertial scrolling phase?
Negative, ghostrider.
Is there any way to run a Javascript callback during that phase?
See above.
Is there a way to sync the scroll offset of two elements (either X or Y, not both) using CSS or some other technology other than JS?
Not quite sure what you mean here, JS can do all of the math'ing that you need but it will have to be when inertial scroll has completed. To be honest though, this may be a symptom of tl;dr since I'm at work right now.
Have you looked at the iScroll library? It simulates intertial (or non-inertial) scrolling for touch and non-touch environments and gives you JS callbacks during/after "scroll" and "inertial scroll" and provides a lot of information that you can use to calculate where you are on the page.
Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts.
http://jquerymobile.com/demos/1.0rc1/docs/api/events.html#/demos/1.0rc1/docs/api/events.html
Thats what they had to say under scroll start section
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'd like to position my autocomplete (menu) properly in relation to the browser window. That is, when the autocomplete is at the top of the page get the menu going down and if at the bottom of the page get the menu going up (even if we have some vertical scrollbar).
Thx.
Use the position option to activate collision detection:
$( "#someElement" ).autocomplete({
source: [...]
position: { collision: "flip" }
});
DEMO
The autocomplete uses the jQuery UI Position utility to easily place the menu relatively to the input element.
The option collision to automatically move the element to an alternative position in case the element would not be viewable in the default direction in the viewport.
The value flip will show the menu below or above, in the direction is will be fully viewable.
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.