Если бы я собирал конструктор форм, я бы сделал все элементы div с изображением фактического виджета в качестве фонового изображения CSS, так что вы можете перетаскивать представление виджета по форме, не активируя его или не имея какого-либо изпроблемы наложения.
Если вы действительно хотите, чтобы он выглядел как готовый продукт, вы можете иметь фактический виджет, вложенный в div, но невидимый, когда пользовательская мышь находится внутри div, когда пользователь перемещает мышь изЗатем div снова делает виджет видимым.
DC
Да. Я знал, что при растяжении фоновое изображение будет выглядеть неправильно.Так что я думал об этом по дороге домой.Лучше было бы создать сэндвич виджета, поместив виджет между 2 делениями, нижний делитель управляет размером, а положение сверху предотвращает активацию виджета
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<style type="text/css">
<!--
.widget {
height: 100%;
width: 100%;
}
.widget_overlay {
border: thin solid #FF0000;
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
right: 1px;
visibility:visible
}
.sz_controller {
position:absolute;
width:365px;
height:61px;
left: 142px;
top: 75px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function ShowHide(button,id){
elem = document.getElementById(id)
if (elem.style.visibility=='hidden') {
elem.style.visibility='visible';
button.value="Hide Overlay";
} else {
elem.style.visibility = 'hidden';
button.value="Show Overlay";
}
}
</script>
</head>
<body>
<input type="button" name="Button" value="Hide Overlay" onClick="ShowHide(this,'widget_overlay')">
<div id="draggable" class="sz_controller" style=""><select class="widget" name="test">
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</select><div id="widget_overlay" class="widget_overlay"></div></div>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</body>
</html>
. Вышеописанное будет работать в firefox
Нажатие на кнопку скрывает оверлейный элемент div, позволяющий проверить виджет. Вы можете перетащить объект по экрану, логика изменения размера не была реализована.
DC