Емулиране на поведение при преоразмеряване на рамка с div с помощта на jQuery без използване на jQuery UI?

Преобразувам сайт за клиент от фреймсет към divs. Една функция, която клиентът има, е странична лента, която може да бъде преоразмерена в зависимост от това колко място се нуждае от потребителя. Използвайки рамки, преоразмеряването на тази странична лента беше вградено. Имам обаче известни затруднения да емулирам тази възможност в jQuery.

Не желая да използвам jQuery UI, за да направя това, нямам нужда от цялата допълнителна функционалност, която UI пакетът предоставя, и бих предпочел просто да напиша няколко реда код, за да се погрижа за това.

Трябва само да преоразмеря в хоризонтална равнина, вертикалните размери са фиксирани.

В момента имам решение, което (донякъде) работи. Страничната лента 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
Да, това го оправи! Благодаря много, имах чувството, че имам нужда от preventDefault() някъде там! - person user210099; 13.01.2011
comment
Странична бележка: Плаващата и абсолютната позиция не живеят заедно. W3C 9.7 Връзки между 'display', 'position', и 'float' ако 'position' има стойност 'absolute' или 'fixed', кутията е абсолютно позиционирана, изчислената стойност на 'float' е 'none'... - person uicoded; 22.05.2012
comment
отличен въпрос и прекрасен отговор. Трябва ли обаче някой да види това, някакви указания за това как мога да предотвратя излизането на плъзгащия се от страницата, когато го плъзнете крайно наляво или надясно? И как мога да задам min-width и max-width на страничната и основната лента? - 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