Показать сообщение отдельно
  #6 (permalink)  
Старый 24.02.2014, 17:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

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>

Последний раз редактировалось рони, 24.02.2014 в 17:22.
Ответить с цитированием