Скачай библиотеку YUI с сайта
http://yuilibrary.com/ там в меню Quick start есть подменю Download.
Перемести библиотеку к себе на хост и подключи в нужном месте вот так:
<script charset="utf-8" src="адрес до библиотеки/yui/yui-min.js" type="text/javascript"></script>
Потом используй вот такой код:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script charset="utf-8" src="../tools/YUI/yui/yui-min.js" type="text/javascript"></script>
<style type="text/css">
#container{
width: 400px;
height: 400px;
border: 1px solid black;
}
#text{
height: 200px;
width: 400px;
}
#label{
position: absolute;
width: auto;
}
.label{
border: 1px dotted black;
}
</style>
</head>
<body>
<div id="container">
<div id="label"></div>
</div>
<textarea id="text"></textarea>
<script type="text/javascript">
// <![CDATA[
// Открываем песочницу
YUI().use('node', 'dd-constrain', function(Y){
// Устанавливаем обработчик на ввод с клавиатуры
Y.one('#text').on('keyup', function(e){
var label = Y.one('#label');
// Записываем содержимое текстового поля в label
label.setHTML(this.get('value'));
// Если label не пуст, добавляем ему стиль с рамкой
if(label.getHTML() != ''){
label.addClass('label');
}
// Иначе убираем стиль
else{
label.removeClass('label');
}
});
// Добавляем плагины для перемещения label в пределах container
new Y.DD.Drag({node: '#label'}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#container'
});
});
// ]]>
</script>
</body>
</html>
Добавлено через 09:49 сек.
Вот рабочий пример
http://example.wen.ru/index.html