javascript - jQuery Ui Draggable 不使用 Flexbox 滚动

Question

我想使用 jquery Ui 可拖动/可放置的方式对某些容器进行排序。

由于元素具有水平直线，所以我使用 display: flex。在将元素添加到我的列表时，这非常有效。

但是我的列表可能比视口(viewport)更大。所以我需要在拖动元素时滚动。

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