Как ограничить пространство перетаскивания div? (без jQuery)

Я хотел бы ограничить перемещение перетаскиваемого div внутри другого div; это достигается с помощью кода ниже:

  <script src = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  <script src = "http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src = "http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <style>
  #modalPar { width: 300px; height: 150px; padding: 0.5em; border: 1px solid black}
  #myModal {width: 200px; border: 1px solid black}
  </style>
  <script>
  $(function() {
    $("#modalPar").draggable();
    $("#myModal").draggable({containment: "parent"});});
</script>

<div id = "modalPar">Parent
<div id = "myModal">Child</div></div>

Я бы хотел сделать то же самое без jQuery. Пробовал подход ниже:

dragElement(document.getElementById("myModal"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
  document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;} 
  else {elmnt.onmousedown = dragMouseDown;}

  function dragMouseDown(w) {
    w = w || window.event;
    w.preventDefault();
    pos3 = w.clientX;
    pos4 = w.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;}
    
  function elementDrag(w) {
    w = w || window.event;
    w.preventDefault();
    pos1 = pos3 - w.clientX;
    pos2 = pos4 - w.clientY;
    pos3 = w.clientX;
    pos4 = w.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";}

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;}}

#myModal {
    position: absolute;
    z-index: 9;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
    top: 0; right: 0; width: 110px; height: 160px}
#myModalheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;}

<div id = "myModal">
  <div id = "myModalheader">Click here to move</div>
  <p>Move</p><p>this</p><p>DIV</p>
</div>

The div can be dragged by the dragging header, which is contained within the full div being dragged, but overflows the parent div. How can this be prevented with JavaScript?

Помощь приветствуется.

javascript jquery css draggable border-layout

08.09.2018 04:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

775

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ниже приведен пример перетаскивания с использованием javascript (без ajax)

//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#mydiv {
    position: absolute;
    z-index: 9;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
}

#mydivheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
}

<!DOCTYPE html>
<html>

<body>

<h1>Draggable DIV Element</h1>

<p>Click and hold the mouse button down while moving the DIV element</p>

<div id = "mydiv">
  <div id = "mydivheader">Click here to move</div>
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
</div>


</body>
</html>

08.09.2018 06:09

Ответ принят как подходящий

Вот вариант; Я не могу предложить, чтобы он был таким же надежным или совместимым с браузером, как jQuery, но он должен показать общую идею. Я использую переменную дескриптора dragged и пару классов, чтобы различать элементы draggable и draggable-child. Для детей есть простая проверка границ. Его можно настроить для заполнения и других вещей, которые вы хотите принять во внимание.

let dragged;

document.addEventListener("mouseup", e => dragged = null);
document.addEventListener("mousedown", e => {
  if (e.target.classList.contains("draggable-handle")) {
    dragged = e.target.parentElement;
  }
});

document.addEventListener("mousemove", e => {    
  if (dragged) {
    e.preventDefault();
    const x = +(dragged.style.left.match(/-?\d+/g) || 0) + e.movementX;
    const y = +(dragged.style.top.match(/-?\d+/g) || 0) + e.movementY;
    const w = dragged.getBoundingClientRect().width;
    const h = dragged.getBoundingClientRect().height;

    if (dragged.classList.contains("draggable-child")) {
      const r = dragged.parentElement.getBoundingClientRect();
      const pw = r.width;
      const ph = r.height;

      if (x < 0 || y < 0 || x + w >= pw || y + h >= ph) {
        return;
      }
    }

    dragged.style.top = `${y}px`;
    dragged.style.left = `${x}px`;
  }
});

#modalPar {
  width: 300px;
  height: 150px;
  border: 1px solid black
}

#myModal {
  width: 200px;
  height: 100px;
  border: 1px solid black
}

.draggable, .draggable-child, .draggable-handle {
  position: absolute;
}

.draggable-handle {
  padding: 0.3em;
  background: black;
  color: white;
  cursor: grab;
}

<div id = "modalPar" class = "draggable">
  <div class = "draggable draggable-handle">[drag]</div>
  <div id = "myModal" class = "draggable draggable-child">
    <div class = "draggable draggable-handle">[drag]</div>
  </div>
</div>

Отлично работает для конкретного примера, хотя я не могу применить его в моем полном контексте; Я пытаюсь перетащить дочерний элемент, щелкнув значок внутри дочернего div, как здесь: jsfiddle.net/bd41jy5L/38 Есть какие-нибудь настройки, чтобы он работал таким образом?

— 08.09.2018 21:01

Добавлены ручки. Я рекомендую по возможности опубликовать ваши полные требования.

— 08.09.2018 21:15

Работает достаточно хорошо - хотя я столкнулся с несколькими проблемами, на устранение которых, вероятно, потребуется время; собираюсь продолжить работу с jQuery. Спасибо за ваш вклад.

— 09.09.2018 03:01

Да, не нужно изобретать велосипед на этом - я воспринимаю это как забавное упражнение. Удачи.

— 09.09.2018 03:29

08.09.2018 08:38