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 不是问题。 删除属性后，我成功拖动并使容器滚动： 助手：'克隆'