'jQuery drag and drop is not working with mobile touch

I am using jQuery drag and drop library, but its working well in web browsers but not working in mobile touch. Here is my html and javascript ..

P.S. I want to get this value so that I can handle multiple boxes with different attributes, that's why I have called the hover function, 

<!-- html -->

    <div>
        <ul class="draggable">
            <li class="dragme">one</li>
            <li class="dragme">two</li>
            <li class="dragme">three</li>
            <li class="dragme">four</li>
            <li class="dragme">five</li>
            <li class="dragme">six</li>
        </ul>
    </div>

<!-- style -->

ul.draggable {list-style: none; }
ul.draggable li {display: block; width: 100px; height: 40px; background-color: #000; color: #fff; margin-top: 20px; text-align: center;}

<!-- javascript -->

       function drags() {
            jQuery('.dragme').hover(function () {
                var dragContent = jQuery(this);
                jQuery(dragContent).draggable({revert: true});
            });
        }
        jQuery(document).ready(function(){
            drags();
        });

I also added this functions (below) to enable touch in mobile it was working well first but, now its not working... I had found it here in stackoverflow 

 <!-- touch functions -->

 function touchHandler(event) {
            var touch = event.changedTouches[0];

            var simulatedEvent = document.createEvent("MouseEvent");
            simulatedEvent.initMouseEvent({
                touchstart: "mousedown",
                touchmove: "mousemove",
                touchend: "mouseup"
            }[event.type], true, true, window, 1,
                    touch.screenX, touch.screenY,
                    touch.clientX, touch.clientY, false,
                    false, false, false, 0, null);

            touch.target.dispatchEvent(simulatedEvent);
            event.preventDefault();
        }

        function init() {
            document.addEventListener("touchstart", touchHandler, true);
            document.addEventListener("touchmove", touchHandler, true);
            document.addEventListener("touchend", touchHandler, true);
            document.addEventListener("touchcancel", touchHandler, true);
        }
     // -- call **init()** in document.ready function

Please help with your answers

Thanks

jquerydrag-and-droptouchwindows-mobile


Solution 1:[1]

First of all, you should move everything into an Anonymous Self-Executing Function.

Next, you should not be initializing the draggable stuff on hover. It happens inside the Self-Executing Function when the page loads.

By default jQuery draggable is not friendly with mobile. You should also use this... http://touchpunch.furf.com - It fills in the gaps in jQueryUI to make drag and drop better on mobile.

By adding TouchPunch, it will just work automatically on mobile. No additional code needed. As a test, if you remove TouchPunch from the jsFiddle, you will see it does not work again.

On the drag call back, we get the element currently being dragged (ui.helper), from this you can pull any attributes or data you want.

(function(){

    $('.dragme').draggable({
        revert: true,
        drag: function (e, ui) {
            var elem = $(ui.helper),
                id = elem.attr('id'),
                data = elem.data('example');

            $('h1').text(data + ' being dragged! #' + id);
        },
        revert: function (e, ui) {            
            $('h1').text('---');
            return !e;
        }
    });

})();

Working Example

Look at External resourses in this fiddle. You will see jQueryUI and Touchpunch

Solution 2:[2]

It happens due to the scrolling action overriding. Add touch-action: none; CSS style to your .draggable class

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Nagibaba

Related Questions