title: simple drag across from left to right with touch functionality
body: <p>I was wondering if there's a drag functionality for touch that's not using jQuery UI that can be used alongside this code below, or if this code may be modified to include code for touch.</p>
  
  <p>The plugin, modified for personal use:
  (<a href="https://github.com/scazzy/jQuery-Draggable" rel="nofollow">https://github.com/scazzy/jQuery-Draggable</a>)</p>
  
  <pre><code>$.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 &gt; parX2 - drg_w) {
                      off_left = parX2 - drg_w;
                      window.location = $('.draggable').attr('href');
                  }
                  if (off_top &lt; parY1) {
                      off_top = parY1;
                  }
                  if (off_top &gt; parY2 - drg_h) {
                      off_top = parY2 - drg_h;
                  }
                  if(prevX &lt; off_left) {
                      prevX = off_left;
                  }
                  if(prevX &gt;= off_left) {
                      off_left = prevX;
                  }
                  if (off_left &lt; parX1) {
                      off_left = parX1;
                  }
                  if (off_left &lt; 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()
          });
      });
  }
  </code></pre>
  
  <p>Calling the plugin:</p>
  
  <pre><code>/* end scissors plugin, start scissors */
  $('.scissors').click(function(e){e.preventDefault();});
  $(".scissors").draggable({
      containParent: true,
      axis: 'x',
      cursor: 'e-resize'
  });
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="divider"&gt;
  &lt;a href="" title="Drag to view the puzzle" class="scissors"&gt;&lt;/a&gt;';
  &lt;img src="/wp-content/themes/pd/images/page-curl.png" width="0" alt="cutting paper" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.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; }
  </code></pre>
  
  <p>You may see it in action here (drag the scissors):
  <a href="http://playfuldevotions.com" rel="nofollow">http://playfuldevotions.com</a></p>
  
  <p>This works well with mouse gestures but not touch.</p>
  
  <p>Thanks in advance!</p>