jQuery 拖放不适用于移动触摸

Question

我正在使用 jQuery 拖放库，但它在网络浏览器中运行良好，但在移动触摸屏中运行不佳。这是我的 html 和 javascript ..

P.S。我想获得 this 值，以便我可以处理具有不同属性的多个框，这就是为什么我调用了 hover 函数，

<!-- 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();
        });

我还添加了此功能（如下）以在移动设备中启用触摸功能，它最初运行良好，但现在无法正常工作...我在 Whosebug 中找到了它

 <!-- 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

请帮忙解答

谢谢

Answer 1

首先，您应该将所有内容移动到 Anonymous Self-Executing Function。

接下来，您不应该在悬停时初始化可拖动的东西。当页面加载时，它发生在自执行函数内部。

默认情况下jQuery draggable 对移动设备不友好。您还应该使用这个... http://touchpunch.furf.com - 它填补了 jQueryUI 中的空白，使拖放在移动设备上更好。

通过添加 TouchPunch，它将自动在移动设备上运行。不需要额外的代码。作为测试，如果您从 jsFiddle 中删除 TouchPunch，您会发现它不再起作用。

在拖动回调中，我们获取当前被拖动的元素 (ui.helper)，您可以从中拉取任何您想要的属性或数据。

(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

查看此 fiddle 中的外部资源。您将看到 jQueryUI 和 Touchpunch

Answer 2

这是由于滚动操作覆盖而发生的。将 touch-action: none; CSS 样式添加到您的 .draggable class

jQuery 拖放不适用于移动触摸

jQuery drag and drop is not working with mobile touch

jquery

drag-and-drop

windows-mobile

touch