[dmivasant]

Вот такой код

<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="img/1.png" width="183" height="23" /><div class="resaze"></div></div>
                      			<div id="element2" class="img"><div class="delete"></div><img src="img/2.png" width="115" height="66" /><div class="resaze"></div></div>
                      			<div id="element3" class="img"><div class="delete"></div><img src="img/3.png" width="183" height="23" /><div class="resaze"></div></div>
                      			<div id="element4" class="img"><div class="delete"></div><img src="img/4.png" width="115" height="66" /><div class="resaze"></div></div>
                          </div>
                       </div> 
                   </div>
<section id="contener">
            </section>

#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{
	float:left ;
	margin: 5px 5px 0 0;
}


/*-----------------------------------------------*/
.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;
}

$('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)
 
        });

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