Простейший drag and drop

[DivMan]

Если перемешать ползунок вправо, а потом влево, то курсор его не цепляет, как убрать этот косяк? 

https://jsfiddle.net/cgcjp036/

[Switch74]

попробуйте медленно подвигать здесь
https://jsfiddle.net/cgcjp036/1/
а вообще передвижение бегунка стоит делать не на самом бегунке, а по его родителю в пределах которого он должен ходить

[DivMan]

А как сделать, что бы когда ползунок дойдёт до границы блока, то дальше не двигался?

Я сделал так, но это очень плохой способ и не всегда работает 

if(ball.style.left == 300 + 'px' || ball.style.left == 0 + 'px' ){
  		document.onmousemove = null;
    	ball.onmouseup = null;
  	}

https://jsfiddle.net/6t52hjnh/

[Switch74]

обычно ограничивают через < и > а не =

[DivMan]

не понял 

[DivMan]

Почему, если переместить ползунок, а потом по нему кликнуть, то от перемешается в самое начало?

http://plnkr.co/edit/2Q5qjN26DVH3lS7HuAbN?p=preview

[Switch74]

thumbStyle.left = e.pageX - box.left + pageXOffset - shiftX + 'px'

а             shiftX = e.pageX - box.left + pageXOffset

[DivMan]

Я всё равно не понял, что с этим делать 

Вот здесь, полностью рабочий код

http://plnkr.co/edit/qYUgegiPL9cBZu2LCvYS?p=preview

Я взял этот же код и убрал функцию getCoords и то, что в ней было, написал без функции и почему-то не работает 

[Switch74]

ну я даже поставил переменные друг под другом, чтобы все понятно было:

сначала вы рассчитываете shiftX = e.pageX - box.left + pageXOffset, потом из e.pageX - box.left + pageXOffset которое в свою очередь равно shiftX вычитаете shiftX вот и получается у вас всегда 0, т.е. скидывается в начало

[DivMan]

Я нашёл очень простое решение

http://plnkr.co/edit/IGdIiT6Oa4gKW6ENThks?p=preview

Edited November 12, 2016 by DivMan

[DivMan]

Как сделать диапазон от 0 до 100?

http://plnkr.co/edit/H08cPcFTewb74tMaiS8S?p=preview

[DivMan]

Как сделать, что бы при перемещении ползунка в начало, блок с картинками, двигался тоже в начало? 

http://plnkr.co/edit/5yhc1pLma3KGWAGdmP99?p=preview

[Switch74]

поробуйте step = thumb.offsetLeft;