ng-sortable : not working proprely, element hidden when dragged

Question

ng-sortable : not working proprely, element hidden when dragged

563 Views Asked by onedkr At 19 September 2016 at 08:32

I try to use ng-sortable in my angular project, but i meet some problems ...

Indeed, I have a list of cards that i want to drag and drop. With ng-sortable I manage to drag and drop my card, however when I do it ng-sortable add the class as-sortable-hidden which hide my card.

How can I avoid that my card is hidden and to have a comportment like the demo below :

http://a5hik.github.io/ng-sortable/#/block

Here my html code :

<div as-sortable="dragControlListeners" data-ng-model="titres" id="sortlist" scroll="false">
        <div as-sortable-item class="as-sortable-item" ng-repeat="titre in titres">
            <div as-sortable-item-handle class="as-sortable-item-handle" ng-show="kpi.activeKPI[$index] != 0">
                <!-- content of one card -->
            </div>
        </div>
    </div>

Original Q&A

There are 1 best solutions below

**Maxwell09** · Answer 1 · 2022-06-03T10:12:47.083000

A bit late but it might help someone stuck in a similar case. I had the same issue and it was a styling conflict with my app's styling.

Here is what I did:

Add these to the .as-sortable-drag class (define the class somewhere if it doesn't exist and use !important if necessary):

position: absolute;
opacity: .8;
pointer-events: none;
z-index: 9999;

Here is my HTML structure:

<div class="row">
    <ul as-sortable="dragControlListeners" data-ng-model="values">
        <li ng-repeat="value in values" data-as-sortable-item>
            <div data-as-sortable-item-handle>
                <div class="row">
                    <div class="col-sm-12">
                        <i class="fas fa-arrows-alt-v mr-6px text-darkest-30"></i>{{value.title}}
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

What helped me understand the issue was Chrome's DOM breakpoints. Juste put one on the <ul> and you will be able to inspect the <ul> element that is appended to <body> when dragging.

ng-sortable : not working proprely, element hidden when dragged

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in NG-SORTABLE

Trending Questions

Popular # Hahtags

Popular Questions