JQuery, растягивание элемента в пределах блока

@olga-li · Регистрация: 28.02.2013

Author24 — интернет-сервис помощи студентам

Привет!

Подскажите как сделать,чтобы можно было растягивать элемент в пределах блока.
Проблема в том,что если элемент находится в левом верхнем углу,то он растягивается правильно.НО если элемент переместить с помощью draggable и попробовать его растянуть,то элемент выходит за пределы блока.

HTML5

<div id="conteiner">
 
<div id="img"></div>
 
</div>
 
<script type="text/javascript"> 
    
    $(document).ready(function(){
        
        
            $("#img").resizable({ 
            maxHeight: 500,
            maxWidth: 500,
            minHeight: 150,
            minWidth: 200,
            autoHide: true,
            containment:'#conteiner', 
        
                    
                                
})
        
})
</script>

mihalken · 02.07.2014, 13:51

Javascript

$("#img").resizable({ 
    maxHeight: 500,
    maxWidth: 500,
    minHeight: 150,
    minWidth: 200,
    autoHide: true,
    containment: '#conteiner'               
}).draggable({
    containment: '#conteiner'
});

?

@olga-li · 02.07.2014, 14:02 **[ТС]**

Спасибо,что ответили!
ЭЛЕМЕНТ ПЕРЕМЕЩАЕТСЯ В ПРЕДЕЛАХ БЛОКА containment: '#conteiner', а должен растягиваться в пределах блока containment:'#resizable'. С перемещением все нормально, а вот растягивание выходит за предел блока containment:'#resizable'

mihalken · 02.07.2014, 14:05

Javascript

$("#img").resizable({ 
    maxHeight: 500,
    maxWidth: 500,
    minHeight: 150,
    minWidth: 200,
    autoHide: true,
    containment: '#resizable'               
}).draggable({
    containment: '#conteiner'
});

?

@olga-li · 02.07.2014, 14:15 **[ТС]**

Сейчас пробовала без draggable тоже самое. Если элемент в верхнем левом углу,то растягивается по пределу блока,а если его переместить например с помощью padding,то при растягивании выходит за пределы блока.
Код экспериментальный:

Javascript

<script type="text/javascript"> 
    
    $(document).ready(function(){
        
        
            $("#img").resizable({ 
            maxHeight: 700,
            maxWidth: 700,
            minHeight: 150,
            minWidth: 200,
            autoHide: true,
            containment:'#conteiner', 
        
                    
                                
})
        
})
</script>

код css:

CSS

#conteiner{
    
    width:500px;
    height:500px;
    border: solid 3px #00F;
    background-color: #CCC;
     margin:0px auto;
     padding-right:40px;
    
    
    
    
    
    
}
        
#img{
 
    width:100px;
    height:100px;
    border: solid 3px  #F00;
    background-color: #CCC;
    margin-left:300px;
    margin-top:150px;
    
 
        
}

Добавлено через 1 минуту

HTML5

<div id="conteiner">
<div id="img"></div>
 
</div>

Добавлено через 4 минуты
Что не так в этом коде?

mihalken · 02.07.2014, 14:35

CSS

    #conteiner{
        width: 200px;
        height: 350px;
        border: solid 3px #00F;
        background-color: #CCC;
        margin:0px auto;
        padding-right: 40px;
        padding-left: 300px;
        padding-top: 150px;
    }
 
    #img{
        width: 100px;
        height: 100px;
        border: solid 3px #F00;
        background-color: #CCC;
    }

Javascript

$(function() {
  $("#img").resizable({ 
    minHeight: 100,
    minWidth: 100,
    autoHide: true,
    maxWidth: 200,
    maxHeight: 350
  }).draggable({
    containment: '#conteiner'
  });
 
});

Демо
?

@olga-li · 03.07.2014, 12:33 **[ТС]**

Я пробовала такой вариант,не то.
Даже в вашем демо, если не трогать элемент,то "ДА" он растягивается в пределах блока,а если его переместить вниз ,а затем растянуть ,то элемент выходит за пределы блока.Вот в этом-то и проблема! Нужно,чтобы независимо куда перетащим элемент,когда будем его растягивать он не выходил за пределы блока.

Пожалуйста,люди,ПОМОГИТЕ!

Никак не получается!

Добавлено через 19 часов 56 минут
Тема еще актуальна! Проблема не решена.

@s3t-shop · 03.07.2014, 14:51

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

потом в скрипте надо указать направление x,y. в стандартном скорей всего с лева на право.. а вам нужно на оборот?
если я правильно вас понял

@olga-li 0 / 0 / 0 Регистрация: 28.02.2013 Сообщений: 6
	02.07.2014, 14:02 [ТС]	3
	Спасибо,что ответили! ЭЛЕМЕНТ ПЕРЕМЕЩАЕТСЯ В ПРЕДЕЛАХ БЛОКА containment: '#conteiner', а должен растягиваться в пределах блока containment:'#resizable'. С перемещением все нормально, а вот растягивание выходит за предел блока containment:'#resizable' 0

@olga-li 0 / 0 / 0 Регистрация: 28.02.2013 Сообщений: 6
	03.07.2014, 12:33 [ТС]	7
	Я пробовала такой вариант,не то. Даже в вашем демо, если не трогать элемент,то "ДА" он растягивается в пределах блока,а если его переместить вниз ,а затем растянуть ,то элемент выходит за пределы блока.Вот в этом-то и проблема! Нужно,чтобы независимо куда перетащим элемент,когда будем его растягивать он не выходил за пределы блока. Пожалуйста,люди,ПОМОГИТЕ! Никак не получается! Добавлено через 19 часов 56 минут Тема еще актуальна! Проблема не решена. 0

@s3t-shop 5 / 5 / 3 Регистрация: 22.06.2014 Сообщений: 23
	03.07.2014, 14:51	8
	блоку надо указать ширину и высоту. потом что б не выходил за приделы то overflow: hidden; ,блоку который должен растягиваться так же указать ширину и высоту. потом в скрипте надо указать направление x,y. в стандартном скорей всего с лева на право.. а вам нужно на оборот? если я правильно вас понял 0