Установка

Question

У меня есть горизонтально, повторно значительные боковую панель, которая сама по себе состоит из двух секций, которые расположены вертикально повторно значительные (вот как my-JSFiddle)

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

$(document).mousemove(function(e){ 
    $('#content').css("width",e.pageX+2); 
    ('#history').css("left",e.pageX+2); 
}) 

Теперь я хочу, чтобы применить следующие ограничения:

ширина

1. мин на боковой панели, так что я не могу со полностью свернуть боковую панель
2. минимальная и максимальная высота на двух секциях боковой панели.

Эти ограничения подобны таковым в самой JSFiddle .. Должен ли я сделать это с помощью JavaScript или только есть способ добиться этого с помощью CSS.

Answer 1

я добавил новый FIDDLE для вас

в вашем случае вы должны проверить текущую ширину и выбрать ширину мин или высоту от CSS

как этот

.... 
var cvmw = parseInt($('#content').css('min-width')); 
.... 

и чем проверка, если его достигнуто

$(document).mousemove(function (e) { 
     // get current with 
     var w = parseInt($('#content').css("width")); 
     // check if with bigger than min-with 
     if (w > cvmw) { 
      $('#content').css("width", e.pageX + 2); 
      $('#history').css("left", e.pageX + 2); 
     } else { 
      $('#content').css("width", cvmw + 1); 
      $('#history').css("left", cvmw + 1); 
      $(document).unbind('mousemove'); 
     } 
    }) 

здесь измененная CSS, есть еще некоторые изменения, сделанные для каждой секции

#content { 
    background-color: WhiteSmoke; 
    width:75%; 
    height: 80%; 
    min-width: 100px; /* added this min-width for further actions */ 
    float: left; 
    position: absolute; 
    top:30px; 
    bottom: 100px; 
} 

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