0

Почему не работает свойство draggable="false" у вложенных div? Как сделать так, чтобы перемещение с помощью мыши было доступно только на желтом диве?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div style="font-size: 20px; width: 150px; height: 150px;
    background-color: yellow; display: flex; justify-content: space-between" draggable="true">
    <div style="width: 50px; height: 50px; background-color: red;" draggable="false" ondragstart="return false;">
      hello
    </div>
    <div style="width: 50px; height: 50px; background-color: green;" draggable="false">
      world
    </div>
  </div>
</body>

</html>

1 ответ 1

2

Без JS здесь не обойтись (раз Вы любитель inline-стиля, то я скрипты прописал в атрибуты, но стили вынес, чтобы не мешались)). Есть пара способов реализации:

.yellow { font-size: 15px; width: 150px; height: 150px; background-color: yellow; display: inline-flex; justify-content: space-between } .red { width: 50px; height: 50px; background-color: red } .green { width: 50px; height: 50px; background-color: green }
<div draggable="true" ondragstart="if (event.target != this) return false;" class="yellow">
  <div draggable="true" class="red">
    первый
  </div>
  <div draggable="true" class="green">
    способ
  </div>
</div>

<div draggable="true" class="yellow">
  <div draggable="true" ondragstart="event.stopPropagation(); return false;" class="red">
    второй
  </div>
  <div draggable="true" ondragstart="event.stopPropagation(); return false;" class="green">
    способ
  </div>
</div>

P.S.: Как будет время, дополню ответ подробностями.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.