Переместить div в другой div

Я пытаюсь разработать простое приложение.

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

Однако это не могу выйти за пределы большой коробки. Я знаю, как переместить меньшую коробку, но я не знаю, как сохранить ее внутри большей коробки. Кто-нибудь может мне помочь, пожалуйста?

Как я уже упоминал, мой код правильно перемещает маленькую рамку, но не удерживает ее внутри большей.

var guy=document.getElementById("guy");
var cont=document.getElementById("container");
var lastX,lastY; // Tracks the last observed mouse X and Y position


guy.addEventListener("mousedown", function(event) {
    if (event.which == 1) {
      lastX = event.pageX;
      lastY = event.pageY;
      addEventListener("mousemove", moved);
      event.preventDefault(); // Prevent selection
    }
  });

function buttonPressed(event) {
    if (event.buttons == null)
      return event.which != 0;
    else
      return event.buttons != 0;
  }
  function moved(event) {
    if (!buttonPressed(event)) {
      removeEventListener("mousemove", moved);
    } else {
      var distX = event.pageX - lastX;
      var distY = event.pageY - lastY;    
      guy.style.left =guy.offsetLeft + distX  + "px";
      guy.style.top = guy.offsetTop + distY  + "px";
      lastX = event.pageX;
      lastY = event.pageY;
    }
  }

#container {
height:400px;
width:600px;
outline: 1px solid black;
position:absolute;
left:50px;
top: 0px;
background-color:green;
}
#guy {
position:absolute;
height:50px;
width:50px;
outline: 1px solid black;
background-color:red;
left: 200px;
top: 200px;
}

<div id = "container" draggable = "true" ></div>
<div id = "guy"></div>

javascript html css

25.10.2018 17:37

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 1

Вам нужно ограничить положение парня пределами контейнера. Другими словами, позиция x парня может как минимум быть позицией x контейнера, максимально положением x контейнера плюс width контейнера минус witdh парня. То же самое касается оси y, но с height вместо width.

var guy=document.getElementById("guy");
var cont=document.getElementById("container");
var lastX,lastY; // Tracks the last observed mouse X and Y position

var minX = cont.offsetLeft;
var maxX = minX + cont.offsetWidth - guy.offsetWidth;

var minY = cont.offsetTop;
var maxY = minY + cont.offsetHeight - guy.offsetHeight;

guy.addEventListener("mousedown", function(event) {
    if (event.which == 1) {
      lastX = event.pageX;
      lastY = event.pageY;
      addEventListener("mousemove", moved);
      event.preventDefault(); // Prevent selection
    }
  });

function buttonPressed(event) {
    if (event.buttons == null)
      return event.which != 0;
    else
      return event.buttons != 0;
  }
  function moved(event) {
    if (!buttonPressed(event)) {
      removeEventListener("mousemove", moved);
    } else {
      var distX = event.pageX - lastX;
      var distY = event.pageY - lastY;
      
      var targetX = guy.offsetLeft + distX;
      var targetY = guy.offsetTop + distY;
      
      guy.style.left = Math.min(maxX, Math.max(minX, targetX)) + "px";
      guy.style.top = Math.min(maxY, Math.max(minY, targetY)) + "px";
      
      lastX = event.pageX;
      lastY = event.pageY;
    }
  }

#container {
height:200px;
width:300px;
outline: 1px solid black;
position:absolute;
left:50px;
top: 0px;
background-color:green;
}
#guy {
position:absolute;
height:50px;
width:50px;
outline: 1px solid black;
background-color:red;
left: 100px;
top: 100px;
}

<div id = "container" draggable = "true" ></div>
<div id = "guy"></div>

это, за исключением того, что я бы вычислял minX, minY и постоянную часть maxX и maxY при загрузке страницы, а не внутри события

— 25.10.2018 18:01

@MikeFurlender Вы совершенно правы, я вытащил это из обработчика событий. Хороший улов.

— 25.10.2018 18:06

25.10.2018 17:54

Другие вопросы по теме

Изображение CSS не отображается (Google AppScript)

Скребок Python с веб-сайта. выбор элементов TR на основе атрибутов нескольких классов

PHP генерирует массивы в цикле

Сортировка элементов модального тела начальной загрузки в Javascript / Jquery при загрузке страницы

Выбор полной строки в p-tree primeng

Всплывающее окно смесь кода javascript + PHP не работает?

Настройка и рисование с тегом холста

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

Как исправить прокрутку div, чтобы сделать ее более плавной?

Стиль или запретить поведение <select> по умолчанию для iOS

Переместить div в другой div

Ответы 1

Другие вопросы по теме

Похожие вопросы