Recommended Posts

В общем, написал вот такой код, где красный блок див можно схватить и перетаскивать, но не знаю как наложить ограничение на то, чтобы этот красный блок див не заходил за рамки второго -- серого блока с размером 500х500 пикселей. Как это можно сделать? 
Хотелось бы увидеть готовый код, чтобы можно было в нём покопаться и разобраться самому. Заранее спасибо.
 

<html> 
<head><title>Moving</title></head> 
<body onload= "init()"> 
<h1 style="margin-left: 650px; color: red;">Адаптировано для Chrome</h1>
<div id='serkv' style="position:absolute;width:500;height:500;background-color:grey;left:10;top:10">
<DIV id='kv' style="position:absolute;left:10;top:10;width:50;height:50;background-color:red"> 
</div> 
</div>
</body> 
<SCRIPT> 
    kv.onmousedown = function(event) {
      kv.style.position = 'absolute';
      kv.style.zIndex = 1000;
      document.body.appendChild(kv);
      moveAt(event.pageX, event.pageY);
      function moveAt(pageX, pageY) {
        kv.style.left = pageX - kv.offsetWidth / 2 + 'px';
        kv.style.top = pageY - kv.offsetHeight / 2 + 'px';
      }

      function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);
      }
      document.addEventListener('mousemove', onMouseMove);
      kv.onmouseup = function() {
        document.removeEventListener('mousemove', onMouseMove);
        kv.onmouseup = null;
      };
    };
    kv.ondragstart = function() {
      return false;
    };
  
</SCRIPT> 
</html>

 

Share this post


Link to post
Share on other sites

когда начинаете тащить свой блок внутри родителя вы должны знать: координаты блока (top,left) и размеры блока (width,height) и родителя (parent_width,parent_height)
зная эти данные вы можете вычислить left+width<=parent_width и top+height<=parent_height
а также left>=0 и top>=0
если left или top меньше 0, то принудительно выставляете его в 0
аналогично для параметров больше parent_width  и parent_height

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Super_Saimo
      Добрый день! Помогите разобраться с работой метода closest(). В приведенном примере https://jsfiddle.net/ymnjo3tc/   , я делаю все "по инструкции":  беру дочерний элемент и проверяю  наличие у него родительского при помощи данного метода. Но в ответ всегда ловлю один и тот-же Exception. Какие бы я не пробовал проверять элементы. В чем может быть проблема? Где я допускаю ошибку? Да и вообще, применим ли этот метод на практике? И в каких ситуациях? 
    • By Роман Онищенко
      Разрабатываю React/React Native приложения. С образцами моих некоммерческих работ вы можете ознакомиться по адресу: https://github.com/Roman-Onishchenko?tab=repositories
      Готов рассмотреть ваши предложения о разработке React/React Native приложений различной тематики и объема работ с частичной занятостью (до 30 рабочих часов в неделю). 
      Мои контакты:
      skype - romanonishencko
      email - roman951t@gmail.com
    • By AnfisaMu
      https://youtu.be/7pr0x3elUzQ  Буду признательна если поможете При наведении на блок он поворачивается под углом, при клике на блок - открывается сам блок на весь экран (плавно), при клике на лого - сворачивается открывшийся блок

  • Member Statistics

    46,235
    Total Members
    3,128
    Most Online
    Bohdan_Barabash
    Newest Member
    Bohdan_Barabash
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.