jquery resizable и droppable

resize
Хочу сегодня поговорить о библиотеке JS — Jquery. Точнее о двух её функциях: resizable и droppable, которые растягивают и перемещают текст.


Итак, конкретно хочу рассказать о взаимодействии этих двух свойств вместе. По каждой из этих функций есть хорошие описания на различных сайтах, особенно классно что есть интерактивные примеры: resizable — можно посмотреть здесь или тут, droppable — можно посмотреть тут или здесь.

Собственно код:
<html> <head>
<link href="stil.css" rel="stylesheet" type="text/css"/>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { $(".res4").resizable({handles:'all',minHeight:20,minWidth:100,containment:"parent"});
$("div").draggable({cursor:"move",containment:"parent",scroll:false,stack: ".draggable",handle: ".res4"}); });
</script>
</head> <body>

<div id="area1"> <!-- Это наш div, я его вставляю в html далее посредстом JS -->
<div class="res4"> Я растягиваемый элемент. Вы можете растягивать и сжимать меня мышкой.
</div>
<!-- Здесь я вставляю div  с помощью jquery -->
<script type"text/javascript">
$('#area1').append("<div class='res4'>здесь первый тексти</div>");
</script>
<script type"text/javascript">
$('#area1').append("<div class='res4'>второй какой то текст</div>");
</script>
</div>
</body> </html>

Файл стилей (stil.css):

body {
width:900px;
height:600px;
margin:50px;
}
/*Класс растягиваемого элемента (уголок, указатель)*/
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
display: none;
} .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0;}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 9px;
height: 9px;
right: -5px;
bottom: -5px;
background: url(123.gif);
} /*правый нижний*/
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
background: url(123.gif);
} /*gif - это у меня квадратик, он по углам вставляется*/
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
background: url(123.gif);
}  /*overflow в area1 - это квадратик понятно съедает по контуру*/
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
background: url(123.gif);
}
.ui-resizable {
border-style:solid;
border-width:1px;
width:150px;
height:110px;
float:left;
}
.res4 {
width:100px;/* длина нашего растягивающегося блока изначально*/
height:20px;
overflow:hidden; /* убираем текст, который выходит за границы нашей области с текстом */
background-color:green;
} /* блок - родитель (parent), его делаем рамкой, ограничивающий наши элементы */
#area1{
width:800px;
height:400px;
border:solid;
}

Оставить комментарий