DragSelect | An easy JavaScript library for selecting and moving elements. With no dependencies. Drag-Select & Dr | Frontend Framework library

Try this snippet. I'll summarize my changes (you can see them as comments in the code)

(1) determine if we're removing or adding based on the start cell

You need to determine if you're removing a collection or adding, based on the start cell.

(2) don't return here

You don't want to return when a cell is being removed, because we want it to run the code for removing a range.

(3) remove or add each element here

This is the most important change. In the .each() function, you need to actually remove or add each element to the collection. I created helper functions called removeElement and addElement just for readability.

I would also suggest you try and refactor your code, as I see a lot of repeated logic that could be separated out into functions of their own. But for the sake of this example, I kept it mostly the same.

I did something similar in my application except I used a TranslateTransform to move my elements. Each "frame" (every mouse move) that I was dragging, I got the position of the mouse and compared that to the previous position of the mouse. I would then set a new TranslateTransform X/Y values equal to the X/Y mouse position change and then would give that to the RenderTransform of each object I wanted to move. Something like:

I used the x and y coordinates of the start and end cell, then calculate every cell that is inside the corresponding rectangle (even partially). Then get the bounding rectangle for these cells and repeat the process until the selection is not expanding anymore.

EDIT: function rectangleSelect is (almost completely) from : Get DOM elements inside a rectangle area of a page

EDIT 2: Now supporting rowspan and other edgecases like selecting [3-2,2-3]:

http://plnkr.co/edit/8wZvcU1SgmieStsqg3lD?p=preview

HTML: