undrag doesn't work with touch

joaograca commented 10 years ago

I need to support touch drag in a project so I saw this example http://raphaeljs.com/touches.html When I call Raphael's undrag the set is undraggable with mouse but still draggable with touch.

Quick example:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>
        <script>
            window.onload = function () {
                //based in http://raphaeljs.com/touches.html
                var R = Raphael(0, 0, "100%", "100%");

                var redBall = R.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5});

                var greenBall = R.circle(100, 250, 50).attr({fill: "hsb(.3, 1, 1)", stroke: "none", opacity: .5});

                var rect = R.rect(200,75,100,50).attr({fill: "#FFFFFF"});

                var text = R.text(rect.getBBox().x+rect.getBBox().width/2,rect.getBBox().y+rect.getBBox().height/2,"Click to Undrag").attr("font-size",14);

                var button = R.set(rect,text);

                var start = function () {
                    console.log("start");
                    this.ox = this.attr("cx");
                    this.oy = this.attr("cy");
                };

                var move = function (dx, dy) {
                    this.attr({cx: this.ox + dx, cy: this.oy + dy});
                };

                var up = function () {
                    console.log("up");
                };

                var ballSet=R.set(redBall,greenBall);
                ballSet.drag(move, start, up);

                button.mousedown(function(){
                    ballSet.undrag();
                    console.log("drag was removed");
                });
            }
        </script>
    </head>
    <body>
        <div id="holder"></div>
    </body>
</html>

jcutrono commented 10 years ago

Having the same issue. Please resolve

jcutrono commented 10 years ago

Not sure if anyone is still watching this issue, but I have a potential solution.

in the function addEvent on line ~3096, there is a check for touch support that adds an event listener that is not tracked and therefor cannot be removed. Above addEvent, I created an array touchable = [] then track it where it is added

touchable.push({ el: obj, start: _f }); obj.addEventListener(touchMap[type], _f, false);

Then in the undrag function line ~3637, I remove it while (i--) if (draggable[i].el == this) { this.unmousedown(draggable[i].start); draggable.splice(i, 1); touchable[i].el.removeEventListener("touchstart", touchable[i].start, false); touchable.splice(i, 1); eve.unbind("raphael.drag.*." + this.id); }

Not sure if this is everything that needs to be done, but it has greatly helped my app.

Good luck

DmitryBaranovskiy / raphael

undrag doesn't work with touch #789