Список с перемещаемыми элементами

Работа на touch и на обычных (декстоп) экранах.  

Есть список divов (40 шт) с текстом (текст произвольный – просто слова, одно слово в каждом divе). Divы имеют атрибут contentable='true' (при клике, текст становиться редактируемым). 

Нужно сделать: При нажатии и удержании 2 сек. Div "активируется" – меняет цвет, его можно двигать вертикально в списке (следует за пальцем или мышью). При перемещении div "выдавливает" другие divы. Отпустили палец или мышь – div встал на соответствующее место. Если перемещаем div в конец  или в начало списка, значит мы выходим за пределы экрана (список у нас большой и не умещается на одном экране), соответственно должен сработать скролл. Если перемещаем палец быстро вниз или вверх – div не должен отставать от пальца. Если медленно скролим страницу с divами – divы, на которые мы попадаем пальцем не должны активизироваться. Также текст в divе не должен выделяться (копирование) если мы нажали на div и удерживаем. 

Визуально, как должно работать можно посмотреть в программе Todoist (Android, IOS), предварительно добавив 40 (!) заметок) 

Желательно без использования тяжелых библиотек (Jquery UI и пр.)