Question

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

P.S。我希望获得此值，以便我可以处理具有不同属性的多个框，这就是我调用悬停函数的原因，

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

我还添加了这个功能（如下所示），以便在移动设备中启用它首先运行良好，但现在它无法工作......我在 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

请帮助您解答

由于

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

看看这个小提琴中的外部资源。你会看到jQueryUI和Touchpunch

jQuery拖放不适用于移动触摸

1 个答案: