Add option for absolute positioning of draggable items

[matthewbub]

Add option for absolute positioning of draggable items

Snapping to the grid was an easy concept to accomplish. Although it came at a cost of verbose and empty divs, and has proved to be a bit tedious to manage page breaks. See #37

It would be awesome to add a switch feature that allows "sticky" and "snap-to" functionality.

What needs to be accomplished first

• [ ] Re-order comments on resize to smaller screens. #37

The plan

I think it would be easiest to create a new variant of the <Comment /> component to address and separate this functionality. From there we can attach a watch method to the MediaPlayer.vue to listen for toggles.

example of how the new structure might look in the MediaPlayer.vue file:

<MediaPlayer>
  <SnapToWrapper v-if="stickygrid === false">
    <Comments v-if="window.innerWidth >= 960" />
    <Comments v-else />
  </SnapToWrapper>

  <StickyWrapper v-else"stickygrid === true">
    <StickyComments v-if="window.innerWidth >= 960" />
    <StickyComments v-else />
  </StickyWrapper>
</MediaPlayer>

Sticky comments will not need the grid what-so-ever so ideally I would like to rid the page of any instance of the grid upon switching to sticky. The grid is pretty deeply intertwined with the <video> itself and we don't want to interfere with playback. So the only way I can think to go about this would be to manually identify and remove the elements from the virtual dom.

A big reason I originally opted for a grid layout was to avoid the need to account for random positioning in a 2d grid. (due to time restraints) However with sticky comments, which depend on absolute positioning, will need to account for the random position within a 2d grid.

Let's avoid any breaking changes here. 👍