Vue.draggable: When clearing list of elements with nth-child CSS peudo element, the last element of each line is not dragabble

[stephanpaquet]

Do not know why, but when using these rules to clear elements each 4 elements, the last element of each line stay fix, not dragabble

.nbr-per-line-4 {
    width: 25%;
    float: left;
    &:nth-child(4n+1) {
        clear:left; // <---     if we comment this property, this will works
    }
}

    <div v-if="lookProductArray.length > 0" class="productListContainer">
        <draggable>
                    <div v-for="lookProduct in lookProductArray" class="product-card-wrapper nbr-per-line-4">
                        <product-card>
                           <!-- component content here -->
                      </product-card>
                    </div>
                <!-- </div> -->
        </draggable>
    </div>

[BubbleBear]

have you solve'd your problem? i can't address the issue with bare eyes, could you provide a fiddle plz?
https://jsfiddle.net/

[amqqliang]

me too! have you solved your problem？

[Lazac92]

+1

[Lazac92]

@VernalVessel

Here is an example:
https://jsfiddle.net/Lazac92/vn5qt15m/

It is working in firefox, but not in chrome or safari.

[David-Desmaisons]

In this case an issue should be open for Sortable.js library as all DOM interaction are managed by this library.

[David-Desmaisons]

Please try again using version 2.18.0