Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 19.12.2014, 23:34   #1
linkoln_7
Форумчанин
 
Регистрация: 04.03.2013
Сообщений: 164
По умолчанию Динамический div

Здравствуйте,не могли бы Вы пояснить почему не работает.
Вот в чем суть проблемы.
Есть функция,создающая 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>
Пожалуйста,объясните в чем проблема,заранее спасибо!
linkoln_7 вне форума Ответить с цитированием
Старый 19.12.2014, 23:52   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Первый див ресайзится средствами CSS, да и то не думаю, что он адекватно во всех браузерах работает на слоях (div), свойство предназначено для текстовых полей (textarea).
Перемещение ему придается скриптом из библиотеки jQuery-UI
Код:
$(function () {
 
            $('.resize').draggable(
            {
                containment: "parent"
            }
 
            )
 
        });
Твой так сказать "динамический" слой не получает этой команды, соответственно и перемещаться он не будет.

То вот что у тебя закоменчено в начале, это назначение ресайза первому слою через ту же самую библиотеку.
jqueryui.com/
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 20.12.2014, 00:24   #3
linkoln_7
Форумчанин
 
Регистрация: 04.03.2013
Сообщений: 164
По умолчанию

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

Последний раз редактировалось linkoln_7; 20.12.2014 в 00:34.
linkoln_7 вне форума Ответить с цитированием
Старый 20.12.2014, 00:26   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

нужно диву назначить поведение
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 20.12.2014, 00:47   #5
linkoln_7
Форумчанин
 
Регистрация: 04.03.2013
Сообщений: 164
По умолчанию

если Вас не затруднит,не могли бы показать,как это сделать.
linkoln_7 вне форума Ответить с цитированием
Старый 20.12.2014, 05:31   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Ну вот есть у тебя функция DynamicDiv(), ты понимаешь, что в ней происходит?
Там у тебя создается элемент, ссылается на него переменная dynDiv, берем эту переменную, создаем из нее объект jQuery и лепим на него функции ресайза и перетаскивания:
Код:
$(dynDiv).resizable().draggable();
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 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.
linkoln_7 вне форума Ответить с цитированием
Старый 21.12.2014, 19:28   #8
linkoln_7
Форумчанин
 
Регистрация: 04.03.2013
Сообщений: 164
По умолчанию

Naive, или тут не так нужно?
linkoln_7 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Что нужно делать чтобы высота 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