asvd / dragscroll

micro library for drag-n-drop scrolling style
http://asvd.github.io/dragscroll/
MIT License
1.1k stars 166 forks source link

Input element not working #18

Open claudchan opened 8 years ago

claudchan commented 8 years ago

Hi, Any way can exclude action elements such as input fields, buttons, etc...? Will be great if implement options or api to use.

jonathan-vallet commented 8 years ago

Hi,

I have made a little update to prevent click when user has drag content from a link, I think it could work with buttons too. I didn't have permissions to make a PR. Here is the new code. Feel free to update the lib if you think it's useful.

(function (root, factory) { if (typeof define === 'function' && define.amd) { define(['exports'], factory); } else if (typeof exports !== 'undefined') { factory(exports); } else { factory((root.dragscroll = {})); } }(this, function (exports) { var _window = window; var _document = document; var mousemove = 'mousemove'; var mouseup = 'mouseup'; var mousedown = 'mousedown'; var click = 'click'; var EventListener = 'EventListener'; var addEventListener = 'add'+EventListener; var removeEventListener = 'remove'+EventListener;

var dragged = [];
var reset = function(i, el) {
    for (i = 0; i < dragged.length;) {
        el = dragged[i++];
        el = el.container || el;
        el[removeEventListener](mousedown, el.md, 0);
        _window[removeEventListener](mouseup, el.mu, 0);
        _window[removeEventListener](mousemove, el.mm, 0);
        _window[removeEventListener](click, el.cl, 0);
    }

    // cloning into array since HTMLCollection is updated dynamically
    dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));
    for (i = 0; i < dragged.length;) {
        (function(el, lastClientX, lastClientY, pushed, scroller, cont){
            (cont = el.container || el)[addEventListener](
                mousedown,
                cont.md = function(e) {
                    if (!el.hasAttribute('nochilddrag') ||
                        _document.elementFromPoint(
                            e.pageX, e.pageY
                        ) == cont
                    ) {
                        pushed = 1;
                        hasMove = false;
                        lastClientX = e.clientX;
                        lastClientY = e.clientY;

                        e.preventDefault();
                    }
                }, 0
            );

            _window[addEventListener](
                mouseup, cont.mu = function() {pushed = 0;}, 0
            );

            _window[addEventListener](
                mousemove,
                cont.mm = function(e) {
                    if (pushed) {
                        hasMove = true;
                         (scroller = el.scroller||el).scrollLeft -=
                             (- lastClientX + (lastClientX=e.clientX));
                         scroller.scrollTop -=
                             (- lastClientY + (lastClientY=e.clientY));
                    }
                }, 0
            );

            _window[addEventListener](
                click,
                cont.cl = function(e) {
                    if(hasMove) {
                        e.preventDefault();
                    }
                }, 0
            );
         })(dragged[i++]);
    }
}

if (_document.readyState == 'complete') {
    reset();
} else {
    _window[addEventListener]('load', reset, 0);
}

exports.reset = reset;

}));

claudchan commented 8 years ago

Doesn't work.

graphiclaboratory commented 8 years ago

I've got the same problem

asvd commented 8 years ago

would it solve the problem, if you use the nochilddrag attribute? (see readme of dragscroll)

claudchan commented 8 years ago

nochilddrag it stop entire element. Not fit into my current problems. By default, the plugin should ignore those inputs, button, links, etc...

claudchan commented 8 years ago

Jquery DragOn did a very good job. But I tested there have mobile issues.

Necko1996 commented 7 years ago

Can anyone tell me how to fix input boxes?

eysmnje commented 6 years ago

Are we just going to remove 'e.preventDefault();' ?

eysmnje commented 6 years ago

mousedown --> remove 'e.preventDefault()' mousemove --> add 'e.preventDefault()'

evgeniy-vashchuk commented 5 years ago

You can find answer for this question here:

https://github.com/asvd/dragscroll/pull/34