Multitouch Mutable List

by Wray Bowling

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  
  <div class="list">
    <div class="list-item">
      <div class="editable" contenteditable>item</div>
      <div class="drag-handle">[x]</div>
    </div>
    <div class="list-item">
      <div class="editable" contenteditable>item</div>
      <div class="drag-handle">[x]</div>
    </div>
  </div>
  
</body>
</html>

CSS

body{
  background:hotpink;
  color:white;
}

.list{
  position:relative;
  border:solid 2px orange;
}

.list-item > *{
  float:left;
}

.list-item{
  position:absolute;
  clear:both;
}

.list-item .drag-handle{
  right:0px;
  width:50px;
  height:50px;
  background-color:black;
  cursor:move;
}

JavaScript

// this is still very much a work in progress... :(

function parser(target){
  
}

var myOffset = 0;
var grabTarget = null;

$(document).ready(function(){
  
  $('.list-item .drag-handle').on({
    
    mousedown:function(e){
      grabTarget = $(this);
      myOffset = e.pageY - $(this).offset().top;
      console.log('grab start: ' + e.pageY + ',' + myOffset);
    },
    
    touchstart:function(e){
      console.log('touch started');
      grabTarget = $(this);
      myOffset = e.originalEvent.changedTouches[0].pageY - $(this).offset().top;
    },
    touchmove:function(e){
      e.preventDefault();
      console.log( e.originalEvent.changedTouches[0].pageY );
      grabTarget.parents('.list-item').css('top', (e.originalEvent.changedTouches[0].pageY - myOffset) + 'px');
    },
    touchend:function(e){
      console.log( 'touch end' );
    }
  });

  $(document).on({
    mousemove:function(e){
      if(grabTarget){
        e.preventDefault();
        console.log('mouse move: ' + e.pageY + ',' + myOffset);
        offsetY = e.pageY;
        grabTarget.parents('.list-item').css('top', (e.pageY - myOffset) + 'px');
      }
    },
    mouseup:function(e){
      console.log('mouse end');
      grabTarget = null;
    }
  });
  
  $('.list-item .editable').on({
    focus:function(e){
      console.log('focused');
    },
    blue:function(e){
      console.log('blurred');
    },
    keyup:function(e){
      console.log('keyCode ' + e.keyCode);
    }
  });
});