jquery ui draggable when set containment draggable div jumping

时间:2016-02-03 07:51:13

标签: javascript jquery jquery-ui jquery-ui-draggable

我正在尝试使用工作正常的jQuery-UI draggable,但我有一个奇怪的行为。当我设置一个收容时,可拖动的div从一侧跳到另一侧。当我禁用它时,我可以顺利地拖动容器。



$('.bJS_issueTeaser').draggable({
  'cursor': 'move',
  axis: "x",
  containment: "parent"
});

.b_ct_issueTeaser {
  width: 37.665rem;
  overflow: hidden;
  max-width: 100%;
  margin-top: 60px;
  position: relative;
  min-height: 250px;
}
.bJS_issueTeaser {
  width: 50.0745rem;
  position: absolute;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.67rem;
  margin-right: -0.67rem;
}
.c_teaser {
  width: 240px;
  height: 100px;
  padding-left: 0.67rem;
  padding-right: 0.67rem;
}
.c_teaser-inner {
  position: relative;
}
.c_description {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2rem;
  background: rgba(255, 255, 255, 0.5);
  padding: 0.67rem 1.34rem;
}
.img-fluid {
  display: block;
  max-width: 100%;
  height: auto;
}

<div class="b_ct_issueTeaser">
  <div class="bJS_issueTeaser ui-draggable ui-draggable-handle">
    <div class="row c_row">
      <div class="c_teaser">
        <div class="c_teaser-inner">
          <img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
          <div class="c_description">
            <a class="b_is-unstyledLink" href="#">

              <p>
                Lorem ipsum
              </p>
            </a>
          </div>
        </div>

      </div>
      <div class="c_teaser">
        <div class="c_teaser-inner">
          <img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
          <div class="c_description">
            <a class="b_is-unstyledLink" href="#">

              <p>
                Lorem Ipsum
              </p>
            </a>
          </div>
        </div>
      </div>
      <div class="c_teaser c_teaser-right">
        <div class="c_teaser-inner">
          <img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
          <div class="c_description">
            <a class="b_is-unstyledLink" href="#">

              <p>
                Lorem ipsum
              </p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

jsFiddle

0 个答案:

没有答案