27.02.2014, 19:15
|
|
Аспирант
|
|
Регистрация: 17.07.2013
Сообщений: 47
|
|
|
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)
});
Промблема в том что когда начинаю перетаскивать картинки они при захвате мышю перескакивают в левый угол и оттуда перетаскиваються, почему так?
Последний раз редактировалось dmivasant, 27.02.2014 в 19:21.
|
|
27.02.2014, 19:45
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от 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>
|
|
28.02.2014, 12:50
|
|
Аспирант
|
|
Регистрация: 17.07.2013
Сообщений: 47
|
|
|
Огромное Вам спасибо!
|
|
28.02.2014, 13:28
|
|
Аспирант
|
|
Регистрация: 17.07.2013
Сообщений: 47
|
|
|
position:absolute;
Здравствуйте, Вы мне с моим скриптом, за что вам огромное спасибо, помогли уже много раз. В том числе и с сбрасыванием в див contener, дописав строчку position:absolute;
но с этим опять возникли промблемы . Дело в том что диву contener можно менять размер и получаеться что когда я сбрасываю картинку, она встаёт куда надо, но когда я прокручиваю скрол который поевляеться если contener например 1000px на 2000px то картинки с position:absolute; остаються на месте. И теперь я думая как можно сделать так чтобы после сбрасывания свойства position:absolute; перестовало работать. Возможно такое?
|
|
04.03.2014, 01:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
|
|
05.03.2014, 14:42
|
|
Аспирант
|
|
Регистрация: 17.07.2013
Сообщений: 47
|
|
Спасибо, все хорошо  Но теперь когда contener принемает картинку и она становиться снова перетаскиваемая внутри contener возникает промблема, попробуте в Вашем скрепте ее потоскать, может получится исправить. Я пробовал изменить своиства #contener div{
position: relative;
display: inline;
}
промблема исщезла для первого перетаскивания, все последующие скачут не по понятной логике. |
|
05.03.2014, 16:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
dmivasant,
ищите свои варианты --
|
Сообщение от dmivasant
|
|
contener принемает картинку и она становиться снова перетаскиваемая внутри contener возникает промблема, попробуте в Вашем скрепте ее потоскать,
|
на всякий случай в коде нет перетаскиваемых картинок -- перепишите код для таскания картинок и таскайте --в css мои знания малы чтоб написать универсальную функцию позиционирования - обращайтесь в раздел работа, может кто поможет.
|
|
05.03.2014, 17:07
|
|
Аспирант
|
|
Регистрация: 17.07.2013
Сообщений: 47
|
|
Пожалусто попробуте в последнем примере изминить 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}), а как я не знаю.Может получиться у вас.  |
|
05.03.2014, 17:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от dmivasant
|
|
Мне кажиться что это в этой строчки можно решить el.css({"top": ($(ui.helper).offset().top - pos.top)- n - 15, "left":$(ui.helper).offset().left-pos.left}), а как я не знаю.Может получиться у вас
|
|
Сообщение от рони
|
|
в css мои знания малы чтоб написать универсальную функцию позиционирования - обращайтесь в раздел работа, может кто поможет.
|
 |
|
|
|
