Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jQuery UI Droppable (https://javascript.ru/forum/jquery/45415-jquery-ui-droppable.html)

dmivasant 27.02.2014 19:15
jQuery UI Droppable
 
Вот такой код
<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)
 
        });


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

рони 27.02.2014 19:45
Цитата:
Сообщение от 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>

dmivasant 28.02.2014 12:50
Огромное Вам спасибо!

dmivasant 28.02.2014 13:28
position:absolute;
 
Здравствуйте, Вы мне с моим скриптом, за что вам огромное спасибо, помогли уже много раз. В том числе и с сбрасыванием в див contener, дописав строчку position:absolute;
но с этим опять возникли промблемы . Дело в том что диву contener можно менять размер и получаеться что когда я сбрасываю картинку, она встаёт куда надо, но когда я прокручиваю скрол который поевляеться если contener например 1000px на 2000px то картинки с position:absolute; остаються на месте. И теперь я думая как можно сделать так чтобы после сбрасывания свойства position:absolute; перестовало работать. Возможно такое?

рони 04.03.2014 01:48
dmivasant,
http://learn.javascript.ru/play/4N6Snc

dmivasant 05.03.2014 14:42
Спасибо, все хорошо:) Но теперь когда contener принемает картинку и она становиться снова перетаскиваемая внутри contener возникает промблема, попробуте в Вашем скрепте ее потоскать, может получится исправить. Я пробовал изменить своиства #contener div{
position: relative;
display: inline;
}
промблема исщезла для первого перетаскивания, все последующие скачут не по понятной логике.

рони 05.03.2014 16:07
dmivasant,
ищите свои варианты --
Цитата:
Сообщение от dmivasant
contener принемает картинку и она становиться снова перетаскиваемая внутри contener возникает промблема, попробуте в Вашем скрепте ее потоскать,
на всякий случай в коде нет перетаскиваемых картинок -- перепишите код для таскания картинок и таскайте --в css мои знания малы чтоб написать универсальную функцию позиционирования - обращайтесь в раздел работа, может кто поможет.

dmivasant 05.03.2014 17:07
Пожалусто попробуте в последнем примере изминить css
#contener div{
position: relative;
display: inline-block;
}
и решить промблему скачков картинок. Мне кажиться что это в этой строчки можно решить el.css({"top": ($(ui.helper).offset().top - pos.top)- n - 15, "left":$(ui.helper).offset().left-pos.left}), а как я не знаю.Может получиться у вас.:help:

рони 05.03.2014 17:11
Цитата:
Сообщение от dmivasant
Мне кажиться что это в этой строчки можно решить el.css({"top": ($(ui.helper).offset().top - pos.top)- n - 15, "left":$(ui.helper).offset().left-pos.left}), а как я не знаю.Может получиться у вас
Цитата:
Сообщение от рони
в css мои знания малы чтоб написать универсальную функцию позиционирования - обращайтесь в раздел работа, может кто поможет.
:-?


Часовой пояс GMT +3, время: 02:21.