Эмуляция поведения изменения размера кадра с помощью div с использованием jQuery без использования пользовательского интерфейса jQuery?

Я конвертирую сайт для клиента из набора фреймов в div. Одной из особенностей клиента является боковая панель, размер которой можно изменять в зависимости от того, сколько места нужно пользователю. С помощью фреймов было встроено изменение размера этой боковой панели. Однако у меня возникли трудности с эмуляцией этой возможности в jQuery.

Я не хочу использовать для этого пользовательский интерфейс jQuery, мне не нужны все дополнительные функции, которые предоставляет набор пользовательского интерфейса, и я бы предпочел просто написать несколько строк кода, чтобы позаботиться об этом.

Мне нужно изменить размер только в горизонтальной плоскости, вертикальные размеры фиксированы.

В настоящее время у меня есть решение, которое (вроде) работает. Размер div боковой панели можно изменить, но только если пользователь нажмет на изменяемый размер div, перетащит мышь, а затем снова нажмет на div (чтобы удалить событие mousemove).

Опыт, который я хочу, таков: пользователь наводит курсор на изменяемый размер div, нажимает кнопку мыши, затем перетаскивает div, чтобы он был больше/меньше, и отпускает кнопку.

Проблема, с которой я сталкиваюсь, заключается в следующем: если пользователь нажимает на мой изменяемый размер div, а затем пытается перетащить его, чтобы сделать его меньше/больше, мышь становится значком «нет», и есть прозрачная версия моего div, которая наркотик вокруг с мышью.

Возможно, это лучше объяснить, проверив мой код:.

$(document).ready(function() {
var i = 0;
   $('#dragbar').mousedown(function(){
        $('#mousestatus').html("mousedown" + i++);
       $(document).mousemove(function(e){
          $('#position').html(e.pageX +', '+ e.pageY);
          $('#sidebar').css("width",e.pageX+2);
       })
       console.log("leaving mouseDown");
    });
   $(document).mouseup(function(){
       $('#clickevent').html('in another mouseUp event' + i++);
       $(document).unbind('mousemove');
       });
});

и HTML:

<div id="header">
    header
    <span id="mousestatus"></span>
    <span id="clickevent"></span>
</div>
<div id="sidebar">
     <span id="position"></span>
    <div id="dragbar">
    </div>
    sidebar
</div>
<div id="main">
    main
</div>
<div id="footer">
    footer
</div>

Вот временная веб-страница с базовым рабочим макетом:

http://pastehtml.com/view/1crj2lj.html

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


javascript html jquery frameset
person user210099    schedule 12.01.2011    source источник
comment
Вот немного другой способ сделать это: https://stackoverflow.com/a/48909827/2736742   -  person A. Morel    schedule 21.02.2018

Ответы (2)


arrow_upward
22
arrow_downward

Посмотрите на http://www.jsfiddle.net/gaby/Bek9L/.

Я изменил область #main на left:200px (без ширины).
Добавил e.preventDefault() при наведении мыши, чтобы избежать выделения текста.
В коде я изменил свойство left #main тоже, так что обе стороны двигаются..

Не уверен, в чем на самом деле проблема, но видно, что размер #sidebar был изменен, но он находился под #main, и поэтому #dragbar исчез.

person Gabriele Petrioli    schedule 12.01.2011
comment
Да, это исправило! Большое спасибо, у меня было чувство, что мне нужно где-то предотвращение по умолчанию ()! - person user210099; 13.01.2011
comment
Боковое примечание: плавающая и абсолютная позиция не живут вместе. W3C 9.7 Взаимосвязь между «отображением», «позицией», и 'float' если 'position' имеет значение 'absolute' или 'fixed', поле абсолютно позиционировано, вычисленное значение 'float' равно 'none'... - person uicoded; 22.05.2012
comment
отличный вопрос и великолепный ответ. Должен ли кто-нибудь видеть это, какие-либо указатели на то, как я могу предотвратить перетаскивание страницы при перетаскивании в крайнее левое или правое положение? И как я могу установить минимальную и максимальную ширину на боковой и основной панели? - person benteh; 03.09.2013
comment
@boblet, вы можете использовать некоторые ограничения в скрипте .. что-то вроде jsfiddle.net/Bek9L/1530 - person Gabriele Petrioli; 03.09.2013
comment
@GabyakaG.Petrioli, ты колени пчел, работает как шарм! Спасибо за ваше время, и большое спасибо! - person benteh; 03.09.2013
comment
@Gaby aka G. Petrioli: Отличная демонстрация, но можем ли мы сделать ее доступной с клавиатуры? - person ; 09.05.2014

arrow_upward
0
arrow_downward

Используйте event.preventDefault.

$('#dragbar').mousedown(function(e){
   e.preventDefault();
   // ...
});

Возможно, вам нужно также вызвать его в mousemove.

person gblazex    schedule 12.01.2011