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

1 ответ 1

1

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

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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