我正在尝试使用工作正常的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;