simple glisser de gauche à droite avec la fonctionnalité tactile

Question

Je me demandais s'il y a une fonctionnalité glisser pour le toucher qui n'utilise pas jQuery UI qui peut être utilisé avec ce code ci-dessous, ou si ce code peut être modifié pour inclure le code au toucher.

Le plug-in, modifié pour un usage personnel: (https://github.com/scazzy/jQuery-Draggable)

$.fn.draggable = function (opt) { 
    var prevX=0; 
    var base = this; 
    var settings = { 
     handle: "", 
     cursor: "move", 
     axis: null, 
     containParent: false 
    }; 
    opt = $.extend(settings, opt); 

    if (opt.handle === "") { 
     var $el = base; 
    } else { 
     var $el = base.find(opt.handle); 
    } 
    return $el.css('cursor', opt.cursor).on("mousedown", function (e) { 
     if (opt.handle === "") { 
      var $drag = $(this).addClass('draggable'); 
     } else { 
      var $drag = $(this).addClass('active-handle').parent().addClass('draggable'); 
     } 
     var z_idx = $drag.css('z-index'), 
      drg_h = $drag.outerHeight(), 
      drg_w = $drag.outerWidth(), 
      pos_y = $drag.offset().top + drg_h - e.pageY, 
      pos_x = $drag.offset().left + drg_w - e.pageX; 
     var parent = $(this).parent(); 
     var parW = parent.width(), 
      parH = parent.height(); 
     var parX1 = parseInt(parent.offset().left) + parseInt(parent.css('padding-left').replace('px', '')), 
      parX2 = parX1 + parW, 
      parY1 = parseInt(parent.offset().top) + parseInt(parent.css('padding-top').replace('px', '')), 
      parY2 = parY1 + parH; 
     $drag.css('z-index', 1000).parents().on("mousemove", function (e) { 
      var off_top = e.pageY + pos_y - drg_h, 
       off_left = e.pageX + pos_x - drg_w, 
       offst = null; 
      if (opt.containParent === true) { 
       if (off_left > parX2 - drg_w) { 
        off_left = parX2 - drg_w; 
        window.location = $('.draggable').attr('href'); 
       } 
       if (off_top < parY1) { 
        off_top = parY1; 
       } 
       if (off_top > parY2 - drg_h) { 
        off_top = parY2 - drg_h; 
       } 
       if(prevX < off_left) { 
        prevX = off_left; 
       } 
       if(prevX >= off_left) { 
        off_left = prevX; 
       } 
       if (off_left < parX1) { 
        off_left = parX1; 
       } 
       if (off_left < parX2 - drg_w) { 
        var imgWidth = $('.draggable').position(); 
        $('.draggable').siblings('img').css('width', imgWidth.left); 
        var imgHeight = $('.draggable').siblings('img').height(); 
        $('.draggable').parent('.divider').css('height', imgHeight+'px'); 
       } 
      } 

      if (opt.axis == "x") { 
       offst = { 
        left: off_left 
       }; 
      } else if (opt.axis == "y") { 
       offst = { 
        top: off_top 
       }; 
      } else { 
       offst = { 
        left: off_left, 
        top: off_top 
       }; 
      } 
      $('.draggable').offset(offst); 
      $('.draggable, html').on("mouseup", function() { 
       $drag.parents().off('mousemove'); 
       $($el).removeClass('draggable').css('z-index', z_idx); 
      }); 
     }); 
     e.preventDefault(); // disable selection 
    }).on("mouseup", function() { 
     if (opt.handle === "") { 
      $(this).removeClass('draggable'); 
     } else { 
      $(this).removeClass('active-handle').parent().removeClass('draggable'); 
     } 
     $el.off('mousedown', function (e) { 
      e.preventDefault() 
     }); 
    }); 
} 

Appel du plugin:

/* end scissors plugin, start scissors */ 
$('.scissors').click(function(e){e.preventDefault();}); 
$(".scissors").draggable({ 
    containParent: true, 
    axis: 'x', 
    cursor: 'e-resize' 
}); 

Le code HTML:

<div class="divider"> 
<a href="" title="Drag to view the puzzle" class="scissors"></a>'; 
<img src="/wp-content/themes/pd/images/page-curl.png" width="0" alt="cutting paper" /> 
</div> 

Le CSS:

.divider { margin: 40px 0; border-top: 1px dashed #1abff0; background: #fff; position: relative; } 
.scissors { position: relative; display: inline-block; top: 0; } 
.scissors:after { width: 22px; height: 16px; content: "\e606"; font-family: 'icomoon', Arial, Helvetica, sans-serif; font-size: .7em; position: absolute; left: -22px; top: -29px; color: #232323; z-index: 1000; } 
.scissors.draggable:after { content: "\e605"; } 
.divider img { position: absolute; top: 0; max-height: none !important; z-index: 0; } 

Vous pouvez voir en action ici (faites glisser les ciseaux): http://playfuldevotions.com

Cela fonctionne bien avec des gestes de la souris, mais pas toucher.

Merci d'avance!

Answer 1

est ici la réponse que je trouve: Javascript Drag and drop for touch devices

J'ai fini par supprimer le event.preventDefault(); Donc, comme ceci:

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

function init() { 
    document.addEventListener("touchstart", touchHandler, true); 
    document.addEventListener("touchmove", touchHandler, true); 
    document.addEventListener("touchend", touchHandler, true); 
    document.addEventListener("touchcancel", touchHandler, true); 
} 

Puis j'ai appelé init() dans document.ready avant le plugin draggable que je l'ai mentionné dans ma question initiale. Cela fonctionne comme un charme.