Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.04.2019, 22:56
Интересующийся
Отправить личное сообщение для Maklay Посмотреть профиль Найти все сообщения от Maklay
 
Регистрация: 01.10.2017
Сообщений: 19

Cамопроизвольное изменение width и height
Столкнулся с непонятным мне поведением.
На странице есть множество однотипных блоков :
<div id="CommentPoint-26" objid="26" ps="1" class="CommentPoint" style="position: absolute; left: 1030; top: 33;">
<div id="Comment-26" class="dragable">
</div>
</div>


div Comment-26 переносится мышью с помощью функции:
'use strict'
let dragedComment={}; // глобальная переменная для переноса комментария
document.addEventListener('mousedown',selectComment)
document.addEventListener('mousemove',dragComment) 
document.addEventListener('mouseup',clearComment) 
function selectComment(e) {
    if (e.which !== 1) { // если клик правой кнопкой мыши
        return; // то он не запускает перенос
    }
    let comment = e.target.closest('.dragable');
    if (!comment)
        return; // не нашли, клик вне draggable-объекта
    // запомнить переносимый объект
    dragedComment= comment;
    dragedComment.position=comment.getBoundingClientRect()
    dragedComment.svgPosition=document.getElementsByTagName('svg')[0].getBoundingClientRect();
    dragedComment.shiftX=e.pageX-dragedComment.position.left
    dragedComment.shiftY=e.pageY-dragedComment.position.top

};

function dragComment(e) {
    if (!dragedComment.position)
    return;
    moveComment(e, dragedComment);
};

function clearComment() {
    dragedComment = {};
};

function moveComment(e, comment) {
    if (!comment)
        return;
    let eObj = comment.parentNode;
    let commentLine = document.getElementById('CommentLine-' + eObj.getAttribute('objid'))
    comment.style.zIndex = 9999; // сделать, чтобы элемент был над другими
    comment.style.position = 'absolute';
/*     comment.style.left = target.pageX - parseInt(eObj.style.left || 0, 10) - comment.offsetWidth / 2 + 'px';
    comment.style.top = target.pageY - parseInt(eObj.style.top || 0, 10) - comment.offsetHeight / 2 + 'px'; */
    comment.style.left=(e.pageX-parseInt(eObj.style.left || 0, 10)-comment.shiftX)+ window.pageXOffset+'px';
    comment.style.top=(e.pageY-parseInt(eObj.style.top || 0, 10)-comment.shiftY )+ window.pageYOffset+'px';
    commentLine.setAttribute('x1', eObj.getBoundingClientRect().left+window.pageXOffset);
    commentLine.setAttribute('x2', comment.getBoundingClientRect().left+window.pageXOffset);
    commentLine.setAttribute('y1', eObj.getBoundingClientRect().top+ window.pageYOffset);
    commentLine.setAttribute('y2', comment.getBoundingClientRect().top+ window.pageYOffset);
}

и все переносится замечательно кроме одной странности. при переносе вправо от родительской точки(Comment point) комментарий(Comment) сжимается по длине увеличиваясь в высоту, при обратном переносе плавно возвращается в свои размеры, при том, что ширина и высота нигде в коде не меняются. Но почему то при просмотре в DevTools у комментария, поля height и width неактивные (светло серые и не содержат внутренних элементов)

Вот как выглядит сие безобразие


Подскажите куда копать,а то даже мысли как составить запрос придумать не могу.
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2019, 00:02
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Maklay
поля height и width неактивные (светло серые и не содержат внутренних элементов)
вычислены автоматически

Сообщение от Maklay
Вот как выглядит сие безобразие
вообще-то всё правильно работает, просто оно не так действует, как вы хотите. У вас родительский элемент намного меньше, происходит перенос строки!

Сообщение от Maklay
при том, что ширина и высота нигде в коде не меняются
так укажите, что именно нужно ( у вас получается width: auto;) укажите одно из значении для свойства width (fit-content либо min-content либо max-content либо конкретный размер, в зависимости от того, что подходит вам!)

например для .draggable можно так width: fit-content;

Последний раз редактировалось Malleys, 22.04.2019 в 01:19. Причина: Выделил жирным ответ на нижний вопрос [QUOTE=Maklay]Но почему оно выглядело именно так, понять так и не смог(или просто уже с
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2019, 00:28
Интересующийся
Отправить личное сообщение для Maklay Посмотреть профиль Найти все сообщения от Maklay
 
Регистрация: 01.10.2017
Сообщений: 19

Хотелось:
Каждый .dragable по ширине самого длинного вложенного <p>.

Получалось:
Слева от родителя, на некотором удалении результат как надо, ближе и справа начинается перенос по пробельным символам с изменением пропорций div.

Исправил в итоге просто задав для <p>
white-space: nowrap.


Но почему оно выглядело именно так, понять так и не смог(или просто уже спать пора). Если кто-то подскажет буду очень признателен.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с рандомными значениями злобная_пипа Элементы интерфейса 6 02.10.2015 20:11
плагин для создания эффекта затемнения всей страницы кроме выбранного элемента DOM рони Ваши сайты и скрипты 57 05.01.2015 19:29
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 09:35
Водяной знак на fancybox bobrina Общие вопросы Javascript 1 03.06.2011 21:11