Пытаюсь "завести" jQuery Draggable. Сайт свёрстан с помощью Twitter Bootstrap. Если не указывать контейнер - всё хорошо, перемещается как надо, если указать, например, window
- тоже всё норм. Но если указать parent или конкретно блок (через класс или id
), то начинается странное - при перемещении блока он начинает "примагничиваться" краями к указанному контейнеру (причём свойство snap не включалось) и перемещаться сразу по несколько сот пикселей резко, не плавно. А ещё, что интереснее, если поведёшь мышь вправо - блок уползёт влево, и наоборот. Вверх-вниз такая же проблема.
jQuery('.edit-button').click(function() {
jQuery('#photo-concurs').addClass('edit');
});
jQuery('#photo-concurs img').draggable({
cursor: "move",
containment: 'parent',
scroll: false,
stop: function() {
jQuery('#photo-concurs').removeClass('edit');
}
});
.long-block {
width: 100%;
height: auto;
float: left;
min-width: 320px;
}
.row {
margin: 0 auto;
}
#photo-concurs {
margin: 0 auto;
overflow: hidden;
}
#photo-concurs .frame {
position: absolute;
left: 0;
top: 0;
z-index: 4;
background: url(http://astrafarm.com/sites/all/themes/nvp/img//frame_X.png) no-repeat;
}
#photo-concurs .frame.horizontal {
width: 600px;
height: 450px;
background: url(http://astrafarm.com/sites/all/themes/nvp/img//frame_X.png) no-repeat;
}
#photo-concurs.edit {
z-index: 1;
overflow: visible;
}
#photo-concurs.horizontal {
width: 600px;
height: 450px;
}
.long-block #photo-concurs img {
z-index: 2;
position: absolute;
top: 0;
left: 0;
max-width: none;
}
#photo-concurs.edit img {
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
cursor: move;
}
.edit-button {
width: 120px;
height: 30px;
background: #0095d4;
color: #fff;
font-size: 16px;
text-align: center;
line-height: 30px;
float: left;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="long-block">
<div class="row">
<div id="photo-concurs" class="horizontal">
<img height="400px" src="http://www.vetkabinet96.ru/pics/sterilizatsija-koshki.jpg" alt="" title="" />
<div class="frame horizontal"></div>
</div>
<div class="edit-button">Редактировать</div>
</div>
</div>
Я грешу на Bootstrap, но не знаю, что конкретно может быть.
Может кто сталкивался?