jQuery Ui Draggable不能使用flexbox滾動

Question

我想用jQuery Ui拖放/可排序一些容器。

由於元素具有水平的直線，因此我使用display: flex 。 將項目添加到我的列表時，此方法效果很好。

但是我的列表可能比視口更大。 所以我需要在拖動元素時滾動。

這是我的小提琴： http : //jsfiddle.net/r9vc9uyd/

HTML

<div class="mainwrap">
        <div class="flexwrap">
            <div class="item item--small"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>
            <div class="item"><p>Loremlorem</p></div>

        </div>
    </div>

CSS

.mainwrap {
            width: 500px;
            display: block;
            background: yellow;
            height: auto;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
        }

        .flexwrap {
            zoom: 1;
            display: flex;
            flex-direction: row;
            padding: 10px 5px;

        }

        .item {
            width: 100px;
            margin: 0 5px;
            padding: 10px;
            background: #bada55;
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: 1;
            word-wrap: break-word;

        }
        .item--small {
            flex-shrink: 1;
            background: mediumvioletred;
            width: 50px;
        }

使用Javascript

$("document").ready(function() {
    $(".item").draggable({
        helper: 'clone',
        opacity: 0.8,
        scroll: true,
        refreshPositions: true,
        scrollSensitivity: 100,
    });
});

Answer 1

Flexbox不是問題。 刪除屬性后，我成功拖動並使容器滾動：helper：'clone'