title: Interact.js Setting dragged on center of td
body: <p>I'm working on creating something of a scheduler, and i'm using interact.js to handle all the drag&amp;drop/snapping of the elements, but I'm having a hard centering and making the elemento to snap to the TD</p>
  
  <p>You can check <a href="http://jsfiddle.net/CJLopez/uwwfud3p/embedded/result/dark/" rel="nofollow">this fiddle to see what I got</a>, if you drag the draggable to the upper left corner of any cell, you'll see that the snap kinda work, but it won't center the element, nor it will happen always, it has to be on a specific position for the snap to work, and not always will snap it to the inner of the cell, sometime, the drag element will have part of it out of the cell.</p>
  
  <p>I already reviewed the Snap example on the plugin github, it gave me an idea of how to achieve what I'm looking for. A grid system wouldn't work for me as the project requieres a column empty as some kind of void.</p>
  
  <p>Any help will be most appreciated.</p>
  
  <p>The crosses above the cells are where the snap is intended to happen, I mean, it's the position of the anchors, not perfect, I'm still working on centering them</p>
  
  <p>This is the code</p>
  
  <pre><code>var element = document.getElementById("schedule");
          var anchors = [];
          document.querySelectorAll(".dropzone").forEach(function (td, i) {
              var boundRect = td.getBoundingClientRect();
              var anchor = {
                  x: boundRect.left + 30,
                  y: boundRect.top + 15,
                  range: 20
              }
              anchors.push(anchor);
          });
          anchors.forEach(function(anchor, i){
              var textNode = document.createElement("div");
              textNode.appendChild(document.createTextNode("+"));
              textNode.style.position = "absolute";
              textNode.style.top = anchor.y + "px";
              textNode.style.left = anchor.x  + "px";
              textNode.style.zIndex = 100;
              textNode.style.fontWeight = "bolder";
              document.querySelector("#wrapper").appendChild(textNode);
          });
  
          // target elements with the "draggable" class
          interact('.draggable')
              .draggable({
                  // enable inertial throwing
                  inertia: true,
                  // snapping to grid
                  snap: {
                      targets: anchors,
                      enabled: true,
                      endOnly: true,
                      //offset: 'startCoords'
                  },
                  // keep the element within the area of it's parent
                  restrict: {
                      drag: element,
                      endOnly: false,
                      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
                  },
                  // enable autoScroll
                  autoScroll: true,
                  // call this function on every dragmove event
                  onmove: dragMoveListener,
                  // call this function on every dragend event
                  onend: function (event) {
                  }
              });
  
          // enable draggables to be dropped into this
              interact('.dropzone').dropzone({
                  // only accept elements matching this CSS selector
                  accept: '#dragabble',
                  // Require a 75% element overlap for a drop to be possible
                  overlap: 0.6,
  
                  // listen for drop related events:
  
                  ondropactivate: function (event) {
                      // add active dropzone feedback
                      event.target.classList.add('drop-active');                    
                  },
                  ondragenter: function (event) {
                      var draggableElement = event.relatedTarget,
                      dropzoneElement = event.target;
  
                      // feedback the possibility of a drop
                      dropzoneElement.classList.add('drop-target');
                      draggableElement.classList.add('can-drop');
                      draggableElement.textContent = 'Dragged in';
                      var dropRect = interact.getElementRect(event.target),
                      dropCenter = {
                          x: dropRect.left + 30,
                          y: dropRect.top  + 15
                      };
  
                      event.draggable.snap({
                        anchors: dropCenter
                      });
                  },
                  ondragleave: function (event) {
                      // remove the drop feedback style
                      event.target.classList.remove('drop-target');
                      event.relatedTarget.classList.remove('can-drop');
                      event.relatedTarget.textContent = 'Dragged out';
                      event.draggable.snap(false);                    
                  },
                  ondrop: function (event) {
                      event.relatedTarget.textContent = 'Dropped';
                  },
                  ondropdeactivate: function (event) {
                      // remove active dropzone feedback
                      event.target.classList.remove('drop-active');
                      event.target.classList.remove('drop-target');
                  }
              });
  
          function dragMoveListener(event) {
              var target = event.target,
              // keep the dragged position in the data-x/data-y attributes
              x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
              y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
  
              // translate the element
              target.style.webkitTransform =
              target.style.transform =
                  'translate(' + x + 'px, ' + y + 'px)';
  
              // update the posiion attributes
              target.setAttribute('data-x', x);
              target.setAttribute('data-y', y);
          }
  
          // this is used later in the resizing and gesture demos
          window.dragMoveListener = dragMoveListener;
  </code></pre>