Форум

dmivasant · #1 (**permalink**) 24.02.2014, 16:30

Здравствуте. Кто знает как сделать так: есть div в котором лежат div-ы одного размера и они могут быть перетаскиваемые Drag в принимающий div Drop. когда div сбрасывают в приемник, то он становиться зарание назначиной картинкой. div вов много и укаждого div-ва свая картинка.

рони · #2 (**permalink**) 24.02.2014, 16:45

dmivasant,
в чём проблема то сделать соответствие дива картинке

dmivasant · #3 (**permalink**) 24.02.2014, 16:54

Сообщение от рони

dmivasant,
в чём проблема то сделать соответствие дива картинке

промблема в том что все картинки разного размера. надо чтоб в диве где они лежат, они были одного размера, а когда их перетаскивают они должны принимать свой истиный размер.
вот код

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>

    <title>Закладки на чистом CSS</title>

    <link rel='stylesheet' href='css/style.css'>

    <style>
    .tabs {
      position: relative;   
      min-height: 200px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: #eee; 
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
    }
    .tab [type=radio] {
      display: none;   
    }
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc;

      overflow: hidden;
    }
    .content > * {
      opacity: 0;

      -webkit-transform: translate3d(0, 0, 0);

      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);

      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }   
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    [type=radio]:checked ~ label ~ .content > * {
      opacity: 1;

      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }
    </style>
</head>

<body>

    <div id="page-wrap">

    <div class="tabs">

       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Закладка №1</label>

           <div class="content">
               <p>Содержание закладки №1</p>
           </div> 
       </div>

       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Закладка №2</label>

           <div class="content">
               <div class="dropp"> 
     <div id="element1"  class="img"><div class="delete"></div><img src="img/1.png"  /><div class="resaze"></div></div>
      <div id="element2" class="img"><div class="delete"></div><img src="img/2.png" width="250" height="140" /><div class="resaze"></div></div>
      <div id="element3" class="img"><div class="delete"></div><img src="img/3.png" width="249" height="31" /><div class="resaze"></div></div>
      <div id="element4" class="img"><div class="delete"></div><img src="img/4.png" width="250" height="143" /><div class="resaze"></div></div>
      <div id="element5" class="img"><div class="delete"></div><img src="img/5.png" width="551" height="245" /><div class="resaze"></div></div>
      <div id="element6" class="img"><div class="delete"></div><img src="img/6.png" width="250" height="140" /><div class="resaze"></div></div>
      <div id="element7" class="img"><div class="delete"></div><img src="img/7.png" width="94" height="19" /><div class="resaze"></div></div>
      <div id="element8" class="img"><div class="delete"></div><img src="img/8.png" width="151" height="19" /><div class="resaze"></div></div>
      <div id="element9" class="img"><div class="delete"></div><img src="img/9.png" width="112" height="19" /><div class="resaze"></div></div>
      <div id="element10" class="img"><div class="delete"></div><img src="img/10.png" width="169" height="19" /><div class="resaze"></div></div>
      <div id="element11" class="img"><div class="delete"></div><img src="img/11.png" width="81" height="31" /><div class="resaze"></div></div>
      <div id="element12" class="img"><div class="delete"></div><img src="img/12.png" width="171" height="164" /><div class="resaze"></div></div>
      <div id="element13" class="img"><div class="delete"></div><img src="img/13.png" width="171" height="165" /><div class="resaze"></div></div>
      <div id="element14" class="img"><div class="delete"></div><img src="img/14.png" width="22" height="150" /><div class="resaze"></div></div>
      <div id="element15" class="img"><div class="delete"></div><img src="img/15.png" width="100" height="32" /><div class="resaze"></div></div>
      <div id="element16" class="img"><div class="delete"></div><img src="img/16.png" width="100" height="32" /><div class="resaze"></div></div>
      <div id="element17" class="img"><div class="delete"></div><img src="img/17.png" width="100" height="31" /><div class="resaze"></div></div>
      <div id="element18" class="img"><div class="delete"></div><img src="img/18.png" width="100" height="31" /><div class="resaze"></div></div> 
    </div>
           </div> 
       </div>

        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Закладка №3</label>

           <div class="content">
               <p>Содержание закладки №3</p>

               <img src="http://placedog.com/200/100">
           </div> 
       </div>

    </div>

</body>

</html>

принемающи див будет ниже.

рони · #4 (**permalink**) 24.02.2014, 16:56

dmivasant,
так всётаки что таскать картинки или дивы ?

dmivasant · #5 (**permalink**) 24.02.2014, 17:06

что проще, итог должен быть таким. изначально все картинки одного размера с flout left. тоесть выстраенны по горизонтали и быть либо одного размере либо 40% от изначального размера а при перетаскивании в приемник они должны принимать свой исходный размер. Просто с размерами пробовал и нечего не получилось, вот и решил что можно с дивами сделать.

рони · #6 (**permalink**) 24.02.2014, 17:19

dmivasant,
непонимаю вашей проблемы ... тащите картинки на синий квадрат они примут свой истинный размер скрипт один в один только css добавлено

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style type='text/css'>
  .wrapper{margin:20px auto}
  #block1,#trash{border:solid 1px #555555;margin:10px;padding:20px;-moz-border-radius:5px;-webkit-border-radius:5px;float:left;height:50px ;min-width:100px}
  .textBlock{cursor: pointer;border:solid 1px #333333;font-weight:bold;margin:10px 0 5px 0;padding:10px;text-align:center;background:#eee;-moz-border-radius:3px;-webkit-border-radius:3px}
  #trash{padding:0px;
    width:335px;height:335px ;
    background-color: #4169E1;
  }
  #trash div{
      width:40px;height:40px ;
      background-color:  #DEB887;
      position:   absolute;
  }

  #trash img{
      position:   absolute;
  }
  #block1 img{
     width:40px;height:40px ;
     float: left;
  }

  </style>
<script type='text/javascript'>
$(window).load(function () {
    $("#block1 img").draggable({
        helper: "clone",
        appendTo: "#trash"
    });
   $("#trash").droppable({
        accept: "#block1 img",
        drop: function (event, ui) {
            var element = $(ui.draggable).clone();
            element.css({"top": $(ui.helper).offset().top - 10, "left":$(ui.helper).offset().left})
            element.appendTo("#trash")
           // element.draggable({ containment:"#trash", scroll:false });
        }
    })
});
</script>
</head>
<body>
      <div class="wrapper">
        <div id="block1" class="">
            <img src="http://javascript.ru/forum/images/smilies/cray.gif" alt="">
            <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
            <img src="http://javascript.ru/forum/images/smilies/cray.gif" alt="">
            <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
            <img src="http://javascript.ru/forum/images/smilies/cray.gif" alt="">
            <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
        </div>
        <div id="trash" class=""></div>
     </div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript