stephband / jquery.event.move Goto Github PK

Hi. There is an issue when using your move event plugin in a page with Mootools more loaded. The following steps can reproduce the issue:

1. Create an empty page with an element. Give position absolute to the element.
2. Add mootools and mootools more to your page.
3. Add jQuery and your move event plugin to the page.
4. Just bind the 'move' event to the element using jQuery. The element will become draggable!

Note that since you use the move plugin to the swipe plugin this issue also occurs in the swipe plugin.

jquery.event.move does not currently support Microsoft's Pointer Events, making a less than fluid experience on IE10 touch devices.

Pointer Events are arguably a better spec, and will eliminate the need for
some of the finger tracking code in jquery.event.move. But neither touch
nor pointer events are a proper standard yet.

I don't have a Windows tablet or phone to test on, so I can't do anything about it. Microsoft are helping WebKit implement pointer events: at that point we'll all be able to see them working and debug.

In the meantime, feel free to help out if you can by forking and patching jquery.event.move and sending a pull request.

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at isIgnoreTag (jquery.event.move.js:198)
at mousedown (jquery.event.move.js:249)
at HTMLDocument.handler (jquery.event.move.js:100)

This happens when you click on scrollbar. Becouse e.target is document and e.target.tagName is undefined.

Hello, I can not find the license for this library

I used your lib to add swipe-to-close interaction to hamburger menu. The menu has inner scroll. Just so you know, I needed to comment out one line in your code to enable inner scroll on iPhone devices.

It might be better not to prevent scrolling by default, but allow us to manually choose wether specific direction should prevent the default event.

Hey Stephen,

Under what license do you distribute your code?

Hi,

This is not actually an issue, it's question, but I must ask here becouse I don't know where to ask.

I'm trying to make slider for web app which has more pages/divs which are floated but they're offset with margin so I can see only one tab per view, and this plugin works fine for me except I wan't something to change.

If I move/drag more than half of width, then "moveend" is called, but if don't nothing happend. So I'm just asking, how to detect if it needs to moveend or not.

I found that this function triggers action:

function activeTouchend(e) {
    var event = e.data.event,
        timer = e.data.timer,
        touch = identifiedTouch(e.changedTouches, event.identifier);
    if (!touch) { return; }
    removeActiveTouch(event);
    endEvent(event, timer);
}

Best regards, and sorry couse I'm asking in issue field.

Array.prototype.indexOf is not implemented in IE8, so plugin produces error in this browser.

Versions 2.0.0+ when add e.stopPropagation() in movestart envent is canot work

I know it is a feature to not have the 'movestart' event fire until there is a move but I need that event raised before there is any move for my own purposes. Looked at the code and there is a threshold value set to 6 which I thought if I set it to 0 would do the job but no. I even removed the code in the checkThreshold() that short circuits the function but no luck.

What do I need to do to get the movestart event immediately on pointer down? or maybe fix it so threshold = 0 behaves as expected.

For some reason after updating from 1.3.6 to 2.0.1, vertical scroll has stopped working in the Microsoft Edge 14 browser in Windows 10 Mobile devices.

Also, vertical scroll still works in the older Internet Explorer 11 mobile browser from an older Lumia, so this issue seems to affect Edge browsers only.

Whenever the plugin is updated, kindly consider not using ECMA Script 2015 methods (like the Symbol function) to prevent developers from ditching this plugin or reverting to version 1.3.6 (like in my case). Users don't always have the device or the browser we would like them to have, so my recommendation is to avoid rendering the plugin unusable for older browsers because there's hardly anything in ES 2015 that is mandatory for the implementation of gestures.

Hi,

first of all you've done great work with this script, I'm using it in my project: http://w3widgets.com/responsive-slider and it works great!

I think it would be nice to make threshold variable available from outside somehow so developers could set it up without modifying the library.

Cheers,
Lukasz

Hi

 I am using this functionality for HTML5 game, Every time i load the page which i integrated  jquery.event.move plugin , 'Move end'  event get increased , For Example 

For the first time event occurred one time , But second time i loads event occurred twice, 3rd time it is thrice etc.................. Please give me a solution.

Is there a way to get currentTarget to work correctly with delegated events or am I doing something wrong?

$(".itemPalette").on "movestart", ".item", (e) ->
  $(e.currentTarget) # is document rather than .item

there is no 2.0.0 release so bower can not update from 1.3.6 to 2.0.0. is this intended? why?

on line 101 char 12 you use for ... of ... which is es6 or with moz extension. I am prepending your js to mine then doing minification. since i am using jshint, jslint or eslint before minification it fails. I can tell my preprocessor to use es6 on your file only but it would be nice if you include it too. just add to the head of your script...

/*jshint esversion: 6 */

Hey Stephen,

If I view the demo page (v 1.2) on a touch device (I tried with an iPad, a galaxy nexus and a nexus 7) I can move the red thing around, but cannot scroll the page around anymore.

I tried an older version (1.0.2) and the page scrolled normally.

cheers
JL

I was trying to use your other plugin "jquery.event.swipe.js" and find velocityX/Y return "NaN".
Digging more, I come inside "jquery.event.move.js" and find when "updateEvent" is call, "timeStamp" is undefined and has side effect to false all calculation after about velocity.
Digging again, I was trying to solve this adding "timeStamp" on "event" (inside "movestart" function) but browser throw a "TypeError: setting getter-only property "timeStamp" (which is not a surprise).

In desperation, I corrected by setting a new parameter to "updateEvent" :
function updateEvent(event, touch, timeStamp, eTimeStamp) {
and for the call :
updateEvent(event, data.touch, data.timeStamp, e.timeStamp);

I'm sure this is not the best solution but at least it does the job ^^

Hi Stephen,

great work on this project. I just noticed the usage of ES6 Symbols in the source: https://github.com/stephband/jquery.event.move/blob/master/js/jquery.event.move.js#L83

As you might know no IE version except Edge supports this. Any chance on some more IE support or should I just use an ES6-shim?

Cheers!
Arno

This is a great little library, however it seems that I will not be able to implement it for my particular use case. Essentially I am looking to create an interaction on the page main container element of a mobile website where dragging your finger from left to right reveals a hidden side menu (a la the Facebook iOS app). I want to utilize the "move" event for this on the page container div, however binding the event subsequently disables native scrolling of the page (as your library intends).

So what I am looking for is a way to conditionally surpress the default event so it only is prevented when the move direction is horizontal (the website is designed to never scroll horizontally anyway), otherwise I want the scrolling to happen as it normally would.

Within the project is an old version of jQuery in js/jquery-3.1.1.js

Vulnerability checkers like retirejs indicate an issue with jquery.event.move, as it contains an outdated jQuery version with known vulnerabilities. As the readme of jquery.event.move notes jQuery is not required anymore, so removing (or updating) the jQuery would be appreciated.

Thank you!

When the element to scroll contains an input element the user cannot scroll the container if they touch over the input element. For example:

<div class="container" style="width: 500px; overflow: hidden;">
<p>Hello World</p>
<div style="width: 1100px">
<input type="text" id="firstName" style="width: 200px; display: inline-block;" />
<input type="text" id="firstName" style="width: 200px; display: inline-block;" />
<input type="text" id="firstName" style="width: 200px; display: inline-block;" />
<input type="text" id="firstName" style="width: 200px; display: inline-block;" />
<input type="text" id="firstName" style="width: 200px; display: inline-block;" />
</div>
</div>

In this case the user can scroll when they press over the paragraph but not when they press over the input.

On

https://jsfiddle.net/twjou50r/1/embedded/result/

I have a webpage where scrolling does not work very well on mobile devices.
I am using the emulation in chrome to try this. A phone will also prove the issue.

Problem: Nothing happends when I try to scroll, even if document content is taller than the window.

If I remove the lines

$('body').on('moveend', function ()
{
    /* something */
});

scrolling works as demonstrated on:
https://jsfiddle.net/twjou50r/2/embedded/result/

(if you want to see the source of those jsfiddles, you click "Edit in JSFiddle")

Hi,

after playing a little with your plugin, I found what seems a bug.
Here is an output of some Chrome logging :

This is just a copy of some consecutive move event properties.

Object {delta: 0, y: 680, start: 686, dist: -6} 
Object {delta: -1, y: 679, start: 686, dist: -7} 
Object {delta: -1, y: 664, start: 686, dist: -22} 
Object {delta: -7, y: 656, start: 686, dist: -30} 
Object {delta: -7, y: 648, start: 686, dist: -38} 
Object {delta: -6, y: 641, start: 686, dist: -45} 
Object {delta: -1, y: 635, start: 686, dist: -51}

deltaY is not coherent with other values. When I used it, animation was always slower than cursor movement.
I switch my moving animation to distY and everything is ok.

Thanks for your job !

I'm trying to use jquery.event.move.js v1.3.1 with Zurb Foundation's Clearing gallery, but when the plugin is in place, the scroll bar is inoperable in Chrome...

First thing, great job on the framework, no real complaints so far.
Although, it seems to me that the example you have on the framework's webpage is broken:

jQuery('.mydiv')
.bind('move', function(e) {
  // move .mydiv horizontally
  jQuery(this).css({ left: e.startX + e.deltaX });
})
.bind('moveend', function() {
  // move is complete!
});

the culprit is this line:

left: e.startX + e.deltaX

deltaX never really grows, it only oscillates. A better line would be something like:

left: e.distX

Keep up the good job!

trying to install via npm/yarn.

Looks like the code I install is always version 1.3.6

also NPM page show version 1.3.6 as default and latest
https://www.npmjs.com/package/jquery.event.move

May i do something wrong or the NPOPM package need to be updated? :)

the for ... of statements break Uglify JS2 and all but the latest browsers. Can we rewrite this to use a more widely supported iteration syntax?

Hello :)

I've got a little bug, but I'm not sure if it comes from jquery.event.move...

In my application, you have like a "picture frame" inside of which you can scroll (desktop) or touch and slide (mobile) up/down to trigger a change in the picture displayed (they are cat-petScan/MRI sections), in increments.

I've implemented jquery.event.move to trigger this change and it works perfectly on Chrome Mobile and Safari Mobile. But with Firefox Mobile it seems that the default-native-scrolling is not disabled, the whole page scrolls !

The code looks like that :

    $(this).bind('move', function(e) {
        if (e.deltaY < 0) {
            prevFrame();
        } else if (e.deltaY > 0) {
            nextFrame();
        }
    });

I read (here : http://stephband.info/jquery.event.swipe/) that "Move events, by default, override native scrolling, as they assume that you want to move something rather than scroll the window". And indeed on Chrome/Safari it seems like it.

One thing I've noted is that it's not really consistent, you can obtain the desired effect by going sideways ("creating" a positive e.deltaX) first, it seems to "unlock" something and then the whole page stops to scroll and the sections pass.
Reciprocally, if you are careful and only go vertically (keeping e.deltaX null), you never trigger the sections but instead scroll the whole page...

In pratice, the first few millimeters are almost always vertical and then the finger naturally goes a little sideways, so the page scrolls a little bit and then the desired sections scrolling takes place.

Have you had any problems like that, and/or with Firefox Mobile ?
Thank you !
Jeb

Your plugin is exactly what i was looking for,
It miss only a thing it's to constrain the drag to the parent div.

And then it would be perfect for me.

In jQuery 1.8 node.data('events') doesn't return events bound to the element anymore, it does $._data(node, 'events') instead. Because of this change plugin throws exception during execution. This also affects jQuery.event.swipe

Not really a big issue, but it would be convenient if package.json were added to this plugin just like you have for jquery.event.swipe.

https://jquery.com/upgrade-guide/3.0/#breaking-change-jquery-event-props-and-jquery-event-fixhooks-removed

jQuery's event handling performance increased thanks to a reorganization of event property management. The main improvement is that jQuery now only calculates or copies a property on the first access, rather than calculating and copying them up front. This is a really big win with properties that may force layout that the event handler may not even need. The most common use we know of was to add properties for pointer events, which is no longer necessary because those events are supported already in jQuery 3.0. The jQuery Migrate plugin provides support for these properties if you still need them. The related but undocumented mouseHooks and keyHooks lists were removed as well. The team is interested in understanding other use cases before defining new APIs, so feel free to open a ticket.

Do you have any suggestions for how I might use this properly with webpack? I can get it to function by providing jquery globally in the page, and then importing this (to get it in my bundle) by the explicit passing of a jquery object fails as webpack doesn't seem to allow it to export a function.

Example of non-working setup, but the way I think it should work:

var $ = "jquery";
require("jquery.event.move")($);

This always leads to a runtime error to the effect that the require is not exporting a function.

The only way I can make it work properly is to have window.jQuery defined, and to do require("jquery.event.move").

When we have more than 1 touch events, it should throw only 1 move event with the two or more touches inside.

$('elem').bind('move',function(){

}

any idea it delay 1 second when use 'move' in mobile?

Hi, my suggestion to be a real plugin it should work this way.

$("#mydiv").eventmove()({
        containment: "parent",
        drag: true,
        rotate: true,
        resize: true,
        keepratio: true,
        ect: true,
});

The plugin isn't working properly for me in Chrome version 58.0.3029.83 on Android on the demo page at http://stephen.band/jquery.event.move/ . Instead of just the red block moving, the page moves as well.

On the desktop, I can see this warning in Chrome cersion 58.0.3029.110 (64-bit) when using Chrome DevTools console to simulate mobile view:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

The behaviour was added to Chrome in version 56, which came out on 25th January.

In Safari and Chrome, the plugin is preventing clicks on video from registering. That is, I can't click on QT player controls. In Firefox 15 (possibly others), clicking a player control initiates a move event that I can't get out of. So the video starts playing, but then the div is dragged around and can't be let go. It seems to be okay in Firefox 3.6.