Почему при перетаскивании блоков они начинают вести себя как блочные объекты, то есть вставать друг под друга?

Question

[JackShcherbakov]

Делаю пазл ребенку. Перетаскиваю элементы div и они ведут себя не так, как надо, то есть должны просто меняться друг с другом. Тут проблема именно в css, это точно.
Вот код
https://codepen.io/CitizenOne/pen/JyVOzx

Comments

[Kovalsky]

Если речь о паззле, то вам всё-таки drag and drop потребуется, а не sortable. Ну, мне так кажется. Посмотрите хотя бы на sortable grid, он работает совсем не как паззл, несмотря на внешнюю схожесть.

Answer 1

[spike__x]

Задайте контейнеру блоков

div {
  display: inline;
}

Comments

[Kovalsky]

Чо-то ничего особенно не изменилось.

[spike__x]

Никита Полевой, Ну вопрос был что они встают друг под друга
codepen

[JackShcherbakov]

Никита Полевой, Изменилось - болки не скачут друг под друга, но все равно криво работает! Не павно как-то, да и вообще багнуто все.

[spike__x]

JackShcherbakov, Какой баг?
Так лучше?

[JackShcherbakov]

spike__x, Все работет не плавно. Хотя раньше работало все хорошо. Все блоки еще в процессе перемещения менялись местами, а тут фигня какая-то. Что за бред - не знаю.

[spike__x]

JackShcherbakov, просто Ваш вопрос был задан

вставать друг под друга

Ну а в JS не шарю

Answer 2

[doweb]

https://jqueryui.com/sortable/

Вот же тут все показано как и что, все отлично работает

Comments

[JackShcherbakov]

Ну так я знаю это, но мой код не работает.

[JackShcherbakov]

JackShcherbakov, Плюс у меня сортировка по горизонтали а не вертикали.

[doweb]

Там же есть и другие примеры, и по вертикали они работают более-менее
https://codepen.io/ksbushuev/pen/zdXRor

Почему бы не воспользоваться готовыми плагинами/решениями?