Форум

valyan · #1 (**permalink**) 01.08.2013, 10:26

Здравствуйте. Есть два div`a.

<div id="YMapsID" >
  <div id="dialog" title="Basic dialog">
    <input type="button" id="EditBtn" style="width: 100px;" value="Править"/>
    <input type="button" id="ApplyBtn" style="width: 100px;" value="Готово"/>
  </div>
</div>

#YMapsID 
{
    border: 1px solid silver;
    width: 80%;
    overflow: auto; 
    height:90%;
    float: left;
    z-index:1;
}

#dialog
{
	 
	border: 1px solid silver;
	margin: auto; 
	padding: 10px; 
	border-radius:10px;
	width : 250;
	position:absolute;
	z-index: 999;
	height:500px;
	display: none;
	background: rgba(220, 220, 220, 0.75);
}

Сейчас второй див (#dialog) поверх первого (#YMapsID), второй див перемещается по всей странице. Как сделать чтобы второй див(#dialog) перемещался только впределах первого (#YMapsID). Для перемещения использую jquery.easydrag.js.

ОлегА · #2 (**permalink**) 01.08.2013, 10:29

используйте плагин jquery Draggable там есть такая возможность

valyan · #3 (**permalink**) 01.08.2013, 10:59

Сообщение от ОлегА

используйте плагин jquery Draggable там есть такая возможность

В <head> добавил

<script type="text/javascript" src="api/js/jquery-ui-1.10.3.custom.js"></script>
<script>
$(function () {
  $("#dialog").draggable({
  containment: "YMapsID"
  });
 });
</script>

Но все равно перемещается по всей странице.

ОлегА · #4 (**permalink**) 01.08.2013, 11:43

по моему так

$(function () {
  $("#dialog").draggable({
  containment: "#YMapsID"
  });
 });

valyan · #5 (**permalink**) 01.08.2013, 11:53

Сообщение от ОлегА

по моему так

$(function () {
  $("#dialog").draggable({
  containment: "#YMapsID"
  });
 });

Вот ведь невнимательность

. Спасибо!!!
А еще вопрос - как можно сделать, чтобы второй див(#dialog) был по центру по правому краю первого (#YMapsID)?

Форум

Справочник

Discord чат

Курсы javascript