Сортировка Jquery не работает на iPad (сенсорное устройство) - PullRequest
Новая
       21

Сортировка Jquery не работает на iPad (сенсорное устройство)

0 голосов
/ 10 мая 2018

Я уже некоторое время работал над сортировкой jquery. Это прекрасно работает; тем не менее, я перехожу к более мобильному редактированию с помощью ipad, и у меня не получилось добиться того, чтобы jquery мог работать на сенсорных устройствах.

Я просмотрел другие посты здесь, а также искал в Google. Наконец-то я нашел решение, которое я частично понял, так как никогда не занимался разработкой сенсорных устройств. Ниже мой код. Сортируемый по-прежнему работает правильно на моем ноутбуке браузера; однако, не работает на сенсорном устройстве (ipad)

Когда я касаюсь списка, он ставит серый фон за всем списком <ul>, а затем, если я продолжаю удерживать его, выбирает слово, где находится мой палец. Это не позволит мне перетащить любой из элементов <li>.

Ниже мой код 

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script>

 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>


<script type="text/javascript">
/*!
 * jQuery UI Touch Punch 0.2.3
 *
 * Copyright 2011–2014, Dave Furfero
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Depends:
 *  jquery.ui.widget.js
 *  jquery.ui.mouse.js
 */
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
</script>

<script type="text/javascript">

//$(document).bind('pageinit', function() {



$(document).ready(function(){


$('#sortable').sortable({
   axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // AJAX POST to server
        $.ajax({
            data: data,
            type: 'POST',
            url: 'inc/refresh_order.php?table=Product_Sections',
            success: function(response) {
             //alert(response);
                var message = "<p>Succesfully updated order of Product Sections</p>";
                $('#message').html(message)
        }
        });
    }
}); 

  $( "#sortable" ).bind( "sortstop", function(event, ui) {
      $('#sortable').listview('refresh');
    });
$( "#sortable" ).disableSelection();
});
</script>

И ниже список (я на самом деле генерирую список с помощью запроса к базе данных ... так что это случайный список со стилем) 

<ul id="sortable" class="Sortable_List">
<li id="item-1">item 1</li>
<li id="item-2">item 2</li>
<li id="item-3">item 3</li>
</ul>

Любая помощь будет великолепна. Не уверен, что именно я сделал не так.

...