2

Пытаюсь "завести" 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, но не знаю, что конкретно может быть.

Может кто сталкивался?

3
  • Можете привести пример на jsfiddle? Commented 9 дек. 2015 в 14:36
  • jsfiddle.net/GodZiLA/sjuaeLeo/13 - пример с контейнером, jsfiddle.net/GodZiLA/sjuaeLeo/12 - пример без него. Нужно нажать "редактировать" и двигать картинку
    – GodZiLA
    Commented 10 дек. 2015 в 7:16
  • Пожалуйста, перенесите код из сторонних фиддлов прямо в вопрос (а то потом ссылки протухают и вопрос становится бессмысленным). Редактирование открывается с помощью кнопки править.
    – Nick Volynkin
    Commented 25 дек. 2015 в 6:16

1 ответ 1

1

Попробуйте отключить стиль:

#photo-concurs {
    margin:0 auto;
    overflow:hidden;
}

В JSFiddle у меня после отключения все заработало.

1
  • Отключил, на JSFiddle - вверх/вниз плавно, вправо/влево - дёргается. У меня на сайте - и вверх/вниз дёргается...
    – GodZiLA
    Commented 10 дек. 2015 в 12:53

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.