Как перетаскивать div и размещать их смежно в горизонтальной линии?

76
11

Я использую код javascript и jquery для размещения divs в другом div, используя функцию перетаскивания. Я хочу поместить div-изображения горизонтально рядом друг с другом и получить их значения. У меня много div и я новичок в javascript и jquery. Пожалуйста, помогите мне в этом отношении. Ниже приведен код:

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

<div id="11" draggable="true" ondragstart="drag(event)"><img src="images/driver1.png" name="Driver"><span>Driver 1</span></div>
<div id="12" draggable="true" ondragstart="drag(event)"><img src="images/driver1.png" Draggable="true" name="Driver"><span>Driver 2</span></div>
<div id="13" draggable="true" ondragstart="drag(event)"><img src="images/driver1.png" Draggable="true" ondragstart="drag(event)" name="Driver" id="13"><span>Driver 3</span></div>
<div id="14" draggable="true" ondragstart="drag(event)"><img src="images/driver1.png" Draggable="true" ondragstart="drag(event)" name="Driver" id="14"><span>Driver 4</span></div>
<div id="15" draggable="true" ondragstart="drag(event)"> <img src="images/driver1.png" Draggable="true" ondragstart="drag(event)" name="Driver" id="15"><span>Driver 5</span> &nbsp</div>

Как я могу поместить divs по горизонтали?

спросил(а) 2021-01-19T16:12:51+03:00 2 месяца, 3 недели назад
1
Решение
61

Вы должны дать каждому ребенку div ширину. Убедитесь, что родительский контейнер имеет заданную ширину. Вам нужно установить дочерние divs для отображения: inline-block;

После установки они должны автоматически выстраиваться в линию, когда вы бросаете новый элемент.

Если вы не можете установить неявные ширины элементов, используйте вместо этого Flexbox.

ответил(а) 2021-01-19T16:12:51+03:00 2 месяца, 3 недели назад
62

Подтверждено как рабочий ответ в комментариях к ОП.

Добавьте в свой CSS следующее:

div { display: inline-block; }

ответил(а) 2021-01-19T16:12:51+03:00 2 месяца, 3 недели назад
44

предоставить идентификатор блокам, которые вы хотите встроить теперь в вашем файле css создайте стиль для элемента с указанным вами идентификатором.

.inline{
display : inline-block;
}
<div>
<div class="inline">1st div</div>
<div class="inline">2nd div</div>
<div class="inline">3rd div</div>
</div>

ответил(а) 2021-01-19T16:12:51+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема