Возможно ли это? - HTML и CSS

linkoln_7 · 17.12.2014, 19:43

Здравствуйте, подскажите пожалуйста.
Есть код

Код:

<%@ 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 как нибудь,пожалуйста помогите,заранее большое спасибо.

Jurijus123 · 17.12.2014, 20:23

кроссота:

Код:

<%@ 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>

linkoln_7 · 17.12.2014, 20:39

Ну вот и зачем,что Вы этим доказали.Вы может и гуру программирования,но разве форумы не созданы для того,что бы объяснять и помогать?

Jurijus123 · 17.12.2014, 20:52

Я padding 40px сделал для отступов

linkoln_7 · 17.12.2014, 21:03

Прошу прощения,мне очень стыдно.

linkoln_7 · 17.12.2014, 21:03

это не работает.

Jurijus123 · 17.12.2014, 21:06

Цитата:

Сообщение от 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>

linkoln_7 · 17.12.2014, 21:08

от делает отступ относительно <div id="container"> ,все равно находят друг на друга при перетаскивании

Jurijus123 · 17.12.2014, 21:21

Вот так лучше

Код:

<p>&nbsp;</p>

linkoln_7 · 17.12.2014, 21:50

это тоже почему то не работает

17.12.2014, 21:21	#9
Jurijus123 Заблокирован Регистрация: 12.11.2014 Сообщений: 120	Вот так лучше Код: `<p> </p>`

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

17.12.2014, 20:39	#3
linkoln_7 Форумчанин Регистрация: 04.03.2013 Сообщений: 164	Ну вот и зачем,что Вы этим доказали.Вы может и гуру программирования,но разве форумы не созданы для того,что бы объяснять и помогать?

17.12.2014, 20:52	#4
Jurijus123 Заблокирован Регистрация: 12.11.2014 Сообщений: 120	Я padding 40px сделал для отступов

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

17.12.2014, 21:08	#8
linkoln_7 Форумчанин Регистрация: 04.03.2013 Сообщений: 164	от делает отступ относительно <div id="container"> ,все равно находят друг на друга при перетаскивании

17.12.2014, 21:50	#10
linkoln_7 Форумчанин Регистрация: 04.03.2013 Сообщений: 164	это тоже почему то не работает