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

Сообщение от dmivasant
Промблема в том что когда начинаю перетаскивать картинки они при захвате мышю перескакивают в левый угол и оттуда перетаскиваються, почему так?
потому что

.content img{
float:left ;

если бы вы показывали всё в сборе а невырванные куски - с отсутствующими тегами в хтмл и скобками и прочим в скриптах - было бы всем проще

если возникнет вопрос сделайте так как ниже, там заодно и вариант решения прыжка при захвате
<!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'>
  #heder {
	height: 126px;
	width: 100%;
	margin-bottom:6px;
}

#contener {
	background-image: url(../img/tiny_grid.png);
	background-repeat:repeat;
	min-height:390px;
	min-width: 950px;
	width: 850px;
	float:left;
}
#contener div{
	position:absolute;
}
.content{
	width:100%;
}

.dropp {
	width:300%;
}
.content img{
    display: inline-block;
	margin: 5px 5px 0 0;
}
.dropp div{
   display: inline-block;
}

/*-----------------------------------------------*/
.tabs {
      position: relative;
      min-height: 150px; /* This part sucks */
      clear: both;
      margin: 5px 0;
	  font-size:12px;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: #eee;
      padding: 5px;
      border: 1px solid #ccc;
      margin-left: -1px;
      position: relative;
      left: 1px;
    }
    .tab [type=radio] {
      display: none;
    }
    .content {
		height:100px;
      position: absolute;
      top: 18px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      border: 1px solid #ccc;
	  overflow-x: scroll;
    }
    .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);
    }
/*---------------------------------------------------------*/
#button {
	position: fixed;
	top: 300px;
	right: 0;
	background: #CCC;
	width: 28px;
	height: 50px;
	font: 40px Georgia;
	color: #FFF;
	text-align: center;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-border-radius:5px 0 0 5px ;
	-moz-border-radius:5px 0 0 5px  ;
	border-radius:5px 0 0 5px ;
	}
#s_panel {
	position: fixed;
	top: 136px;
	right: -300px;
	border: 1px solid #999;
	width: 290px;
	height: 300px;
	padding: 5px;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-border-radius:  5px 0 0 5px;
	-moz-border-radius:   5px 0 0 5px;
	border-radius:   5px 0 0 5px;
	}
#button:hover {
	right: 300px;
}
#button:hover #s_panel {
	right: 0;
}

  </style>
<script type='text/javascript'>
$(window).load(function () {
  $('div[id*=element]').draggable({
        containment: "#wraper",
        revert: "invalid",
        grid: [ 20, 20 ],
        opacity: 0.5,
        scroll: false,
        zIndex: 35,
        appendTo: "body",
        helper: "clone",
        cursor: "move",
        stack: "div[id*=element] > img"
    })
$("#contener").droppable({
    accept: "#heder > .tabs > .tab >  .content > .dropp > div[id*=element]",
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        var element = $(ui.draggable);
        element.fadeIn(1000, function () {
            $(this).clone()
			.css({"top": $(ui.helper).offset().top - 1, "left":$(ui.helper).offset().left})

                .addClass("newElement")
                .appendTo("#contener")
                .draggable({containment: "#contener", opacity: 0.5, stack: "div[id*=element]", cursor: "move"})
                .resizable({containment: "#contener",/*aspectRatio:true*/})
                .find('img').animate({'width': '100%','height': '100%'}, 100)
           });
        }});
     });

</script>
</head>
<body>
 <header id="heder">
                <div class="tabs">
                   <div class="tab">
                       <input type="radio" id="tab-1" name="tab-group-1" checked>
                       <label for="tab-1">Однапиксельные рамки</label>
                       <div class="content">

                       </div>
                   </div>

                   <div class="tab">
                       <input type="radio" id="tab-2" name="tab-group-1">
                       <label for="tab-2">Элементы формы</label>

                       <div class="content">
                           <div class="dropp">
                      			<div id="element1"  class="uvelihin"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="183" height="23" /><div class="resaze"></div></div>
                      			<div id="element2" class="img"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="115" height="66" /><div class="resaze"></div></div>
                      			<div id="element3" class="img"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="183" height="23" /><div class="resaze"></div></div>
                      			<div id="element4" class="img"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="115" height="66" /><div class="resaze"></div></div>
                          </div>
                       </div>
                   </div>
                </div>
<section id="contener"> картинку со второго таба кидать сюды
            </section>
   </header>
</body>
</html>
Ответить с цитированием