Динамический div - JavaScript, Ajax

linkoln_7 · 19.12.2014, 23:34

Здравствуйте,не могли бы Вы пояснить почему не работает.
Вот в чем суть проблемы.
Есть функция,создающая div и им присваивается класс resize,благодаря которому div может перемещаться и изменять свое положение.
Проблема в том,что div, созданный программно и перемещается и изменяет свой размер,а тот,который создается по нажатию кнопки,только размеры меняет.

Код:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
    <style type="text/css">
        #astor, #lily {text-align: center; width: 150px; float: left; margin: 20px}
        #astor img, #lily img {display: block; margin: auto}
      .resize img
      {
          display: block; margin: auto
          }
        
        .resize 
        {
            width:10px;
            height:10px;
  background-color: #29e;
  color: white;
  font-size: 20px;
  font-family: sans-serif;
  /*border-radius: 8px;
  box-sizing: border-box;
  padding: 25px;
  margin: 3px;*/
    position: relative; 
    border: 2px solid;
    padding: 1px 1px; 
   
    resize: both;
    overflow: auto;
    
 
}
 #container {box-shadow: 4px 0px 18px -1px #0000ff; width: 700px; height: 450px}
        
    </style>
    <script type="text/javascript">
       /* $(function () {
 
            $('.resize').resizable({
                alsoResize: ".resize img"
            });
 
        });*/
 
 
        $(function () {
 
            $('.resize').draggable(
            {
                containment: "parent"
            }
 
            )
 
        });
 
 
        var name_id = 0;
 
 
        function DynamicDiv() {
 
 
 
            var dynDiv = document.createElement("div");
            name_id++;
            dynDiv.id = 'div_' + name_id;
            dynDiv.innerHTML = name_id;
            dynDiv.style.width = "200px";
            dynDiv.style.height = "100px";
            dynDiv.style.left = "50px";
            dynDiv.style.top = "50px";
           
 
 
            dynDiv.className = "resize";
 
            document.getElementById('container').appendChild(dynDiv);
        }
 
    </script>
 
 
 
 
</head>
<body>
<input id="Button1" type="button"
        value="Using JS" onclick="DynamicDiv();" />  
  <div id ="container">
  <div class="resize">
  </div>
   
    </div>
</body>
</html>

Еще почему то
это программный div ему класс присваивается resize ui-draggable хотя вот тут <div class="resize">
</div>

Код:

<div class="resize ui-draggable" style="width: 330px; height: 192px; left: 201px; top: 26px;">
  </div>

а это который создается по кнопке 

	Код:
	<div id="div_1" class="resize" style="width: 200px; height: 100px; left: 50px; top: 50px;">1</div>
Пожалуйста,объясните в чем проблема,заранее спасибо!

Naive · 19.12.2014, 23:52

Первый див ресайзится средствами CSS, да и то не думаю, что он адекватно во всех браузерах работает на слоях (div), свойство предназначено для текстовых полей (textarea).
Перемещение ему придается скриптом из библиотеки jQuery-UI

Код:

$(function () {
 
            $('.resize').draggable(
            {
                containment: "parent"
            }
 
            )
 
        });

Твой так сказать "динамический" слой не получает этой команды, соответственно и перемещаться он не будет.

То вот что у тебя закоменчено в начале, это назначение ресайза первому слою через ту же самую библиотеку.
jqueryui.com/

linkoln_7 · 20.12.2014, 00:24

Прошу прощения,не очень понял,нужно дописать к div ,который формируется в функции?
у меня он делает resize,созданным div он их не перемещает.

Naive · 20.12.2014, 00:26

нужно диву назначить поведение

linkoln_7 · 20.12.2014, 00:47

если Вас не затруднит,не могли бы показать,как это сделать.

Naive · 20.12.2014, 05:31

Ну вот есть у тебя функция DynamicDiv(), ты понимаешь, что в ней происходит?
Там у тебя создается элемент, ссылается на него переменная dynDiv, берем эту переменную, создаем из нее объект jQuery и лепим на него функции ресайза и перетаскивания:

Код:

$(dynDiv).resizable().draggable();

linkoln_7 · 20.12.2014, 22:03

Да,конечно,понимаю.

По факту функция вот так вот должна же выглядеть или я где то ошибся?

Код:

$(function () {

            $(dynDiv).draggable(
            {
                containment: "parent"
            }

            )

        });

так же как и с div у которых класс resize.

или так

Код:

 $(function () {

        $(dynDiv).resizable().draggable();
        
        )};

Но почему то не работает.

linkoln_7 · 21.12.2014, 19:28

Naive, или тут не так нужно?

20.12.2014, 00:24	#3
linkoln_7 Форумчанин Регистрация: 04.03.2013 Сообщений: 164	Прошу прощения,не очень понял,нужно дописать к div ,который формируется в функции? у меня он делает resize,созданным div он их не перемещает. Последний раз редактировалось linkoln_7; 20.12.2014 в 00:34.

20.12.2014, 00:26	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	нужно диву назначить поведение Alar, верни репу!

20.12.2014, 05:31	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Ну вот есть у тебя функция DynamicDiv(), ты понимаешь, что в ней происходит? Там у тебя создается элемент, ссылается на него переменная dynDiv, берем эту переменную, создаем из нее объект jQuery и лепим на него функции ресайза и перетаскивания: Код: `$(dynDiv).resizable().draggable();` Alar, верни репу!

20.12.2014, 22:03	#7
linkoln_7 Форумчанин Регистрация: 04.03.2013 Сообщений: 164	Да,конечно,понимаю. По факту функция вот так вот должна же выглядеть или я где то ошибся? Код: `$(function () { $(dynDiv).draggable( { containment: "parent" } ) });` так же как и с div у которых класс resize. или так Код: `$(function () { $(dynDiv).resizable().draggable(); )};` Но почему то не работает. Последний раз редактировалось linkoln_7; 20.12.2014 в 22:09.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Что нужно делать чтобы высота div зависила то дочурного div?	Duddu	HTML и CSS	2	25.04.2012 21:23
Как растянуть div на оставшуюся высоту родительского div'a?	Gans.7	HTML и CSS	0	01.04.2012 10:55
как выровнить div внутри другого div'a по вертикали по центру	Arassir	HTML и CSS	4	12.03.2011 20:01
div тег как нижний слой для второго div тега	dadli	HTML и CSS	2	30.07.2010 01:12
Позиционирование двух плавающих DIV внутри одного DIV	allocator	HTML и CSS	5	22.07.2009 13:48

19.12.2014, 23:52	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Первый див ресайзится средствами CSS, да и то не думаю, что он адекватно во всех браузерах работает на слоях (div), свойство предназначено для текстовых полей (textarea). Перемещение ему придается скриптом из библиотеки jQuery-UI Код: `$(function () { $('.resize').draggable( { containment: "parent" } ) });` Твой так сказать "динамический" слой не получает этой команды, соответственно и перемещаться он не будет. То вот что у тебя закоменчено в начале, это назначение ресайза первому слою через ту же самую библиотеку. jqueryui.com/ Alar, верни репу!

20.12.2014, 00:47	#5
linkoln_7 Форумчанин Регистрация: 04.03.2013 Сообщений: 164	если Вас не затруднит,не могли бы показать,как это сделать.

21.12.2014, 19:28	#8
linkoln_7 Форумчанин Регистрация: 04.03.2013 Сообщений: 164	Naive, или тут не так нужно?