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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 17.12.2014, 19:43   #1
linkoln_7
Форумчанин
 
Регистрация: 04.03.2013
Сообщений: 164
По умолчанию Возможно ли это?

Здравствуйте, подскажите пожалуйста.
Есть код
Код:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>
    <script src="js/interact.js"></script>
 
 <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">
       
        #container {box-shadow: 4px 0px 18px -1px #0000ff; width: 700px; height: 450px}
    </style>
    <script type="text/javascript">

        /* Изменение размера*/

        interact('.resize')
  .resizable(true)
  .on('resizemove', function (event) {
      var target = event.target;

      // add the change in coords to the previous width of the target element
      var 
      newWidth = parseFloat(target.style.width) + event.dx,
      newHeight = parseFloat(target.style.height) + event.dy;

      // update the element's style
      target.style.width = newWidth + 'px';
      target.style.height = newHeight + 'px';

      target.textContent = newWidth + '?' + newHeight;
  });

        /* Что бы двигался внути контейнера */

        $(function () {

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

        });

        /*Добавление*/

    </script> 
 
 
<style>
.resize {
  background-color: #29e;
  color: white;
  font-size: 20px;
  font-family: sans-serif;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 25px;
  margin: 3px;
 
 
  
 
}
 
 .resize:hover
 {
     background-color: black;
     
     }
</style>
 

 
</head>
<body>
 
   <form id="form1" runat="server">
    
        

   <div id="container">
   <div id="box1" class="resize"
         style="width: 100px; height: 200px">  1</div>

        <div id="box2" class="resize"
         style="width: 100px; height: 200px">  2</div>
      </div>

   
   
     </form>
   
 
</body>
</html>
перетаскивание и изменение 2 div,нужно что бы они не налезали друг на друга,реально ли это реализовать через отступы margin или через :hover как нибудь,пожалуйста помогите,заранее большое спасибо.

Последний раз редактировалось linkoln_7; 17.12.2014 в 21:02.
linkoln_7 вне форума Ответить с цитированием
Старый 17.12.2014, 20:23   #2
Jurijus123
Заблокирован
 
Регистрация: 12.11.2014
Сообщений: 120
По умолчанию

кроссота:

Код:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>
    <script src="js/interact.js"></script>
 
 <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">
       
        #container {box-shadow: 4px 0px 18px -1px #0000ff; width: 700px; height: 450px}
    </style>
    <script type="text/javascript">

        /* Изменение размера*/

        interact('.resize')
  .resizable(true)
  .on('resizemove', function (event) {
      var target = event.target;

      // add the change in coords to the previous width of the target element
      var 
      newWidth = parseFloat(target.style.width) + event.dx,
      newHeight = parseFloat(target.style.height) + event.dy;

      // update the element's style
      target.style.width = newWidth + 'px';
      target.style.height = newHeight + 'px';

      target.textContent = newWidth + '?' + newHeight;
  });

        /* Что бы двигался внути контейнера */

        $(function () {

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

        });

        /*Добавление*/

    </script> 
 
 
<style>
.resize {
  background-color: #29e;
  color: white;
  font-size: 20px;
  font-family: sans-serif;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 25px;
  margin: 3px;
 
 
  
 
}
 
 .resize:hover
 {
     background-color: black;
     
     }
</style>
 

 
</head>
<body>
 
   <form id="form1" runat="server">
    
        

   <div id="container">
   <div id="box1" class="resize"
         style="border-style:solid; padding:40px; width: 100px; height: 200px">  1</div>

        <div id="box2" class="resize"
         style="border-style:solid; padding:40px; width: 100px; height: 200px">  2</div>
      </div>

   
   
     </form>
   
 
</body>
</html>
Jurijus123 вне форума Ответить с цитированием
Старый 17.12.2014, 20:39   #3
linkoln_7
Форумчанин
 
Регистрация: 04.03.2013
Сообщений: 164
По умолчанию

Ну вот и зачем,что Вы этим доказали.Вы может и гуру программирования,но разве форумы не созданы для того,что бы объяснять и помогать?
linkoln_7 вне форума Ответить с цитированием
Старый 17.12.2014, 20:52   #4
Jurijus123
Заблокирован
 
Регистрация: 12.11.2014
Сообщений: 120
По умолчанию

Я padding 40px сделал для отступов
Jurijus123 вне форума Ответить с цитированием
Старый 17.12.2014, 21:03   #5
linkoln_7
Форумчанин
 
Регистрация: 04.03.2013
Сообщений: 164
По умолчанию

Прошу прощения,мне очень стыдно.
linkoln_7 вне форума Ответить с цитированием
Старый 17.12.2014, 21:03   #6
linkoln_7
Форумчанин
 
Регистрация: 04.03.2013
Сообщений: 164
По умолчанию

это не работает.
linkoln_7 вне форума Ответить с цитированием
Старый 17.12.2014, 21:06   #7
Jurijus123
Заблокирован
 
Регистрация: 12.11.2014
Сообщений: 120
По умолчанию

Цитата:
Сообщение от Jurijus123 Посмотреть сообщение
Я padding 40px сделал для отступов
Вот здесь margin: 20px или padding: 40px
Код:
 <form id="form1" runat="server">
    
        

   <div id="container">
   <div id="box1" class="resize"
         style="border-style:solid; margin:20px; width: 100px; height: 200px">  1</div>

        <div id="box2" class="resize"
         style="border-style:solid; margin:20px; width: 100px; height: 200px">  2</div>
      </div>

   
   
     </form>
Jurijus123 вне форума Ответить с цитированием
Старый 17.12.2014, 21:08   #8
linkoln_7
Форумчанин
 
Регистрация: 04.03.2013
Сообщений: 164
По умолчанию

от делает отступ относительно <div id="container"> ,все равно находят друг на друга при перетаскивании
linkoln_7 вне форума Ответить с цитированием
Старый 17.12.2014, 21:21   #9
Jurijus123
Заблокирован
 
Регистрация: 12.11.2014
Сообщений: 120
По умолчанию

Вот так лучше

Код:
<p>&nbsp;</p>
Jurijus123 вне форума Ответить с цитированием
Старый 17.12.2014, 21:50   #10
linkoln_7
Форумчанин
 
Регистрация: 04.03.2013
Сообщений: 164
По умолчанию

это тоже почему то не работает
linkoln_7 вне форума Ответить с цитированием
Ответ


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Возможно ли это? Meunikum PHP 11 29.05.2011 15:40
Возможно ли это? CraZZZy-GameRRR Общие вопросы Delphi 7 05.05.2010 15:41
Это возможно? Shaitan63 Общие вопросы Delphi 24 01.05.2008 22:59
Возможно ли это...? jungo Microsoft Office Excel 7 20.11.2007 00:01