Text disappears in the drag behaviour

[Handresito]

Thanks in advance.

I want to drag a category in the list but when I moving it across the list the item text disappears.

Sorry for my bad english.

[Handresito]

In the images I try to move literary section.

[JDonadio]

I had the same issue.

I tried a lot of options on css, if you do this .as-sortable-drag { position: absolute; } it's makes visible but in my case the list loses a place and looks horrible.

[gabrielbazan7]

Same issue here!

[JDonadio]

I found the error in css, try something like this:

.as-sortable-placeholder { background: url('../img/icon-wallet.svg') no-repeat left center; background-size: 17% 80%; /outline: 1px dashed darkgray;/ opacity: .4; margin-left: 10px; }

.as-sortable-drag { margin: -5px; opacity: .5; }

.as-sortable-hidden { }

And play with the properties as you prefer, but this classes have to be included in your css file.

Note, this not solve the fact that the element is "hidden", just show you a new element over that. So if you are dragging an element, you lose it until you drop it.

[Handresito]

I resolve this issue giving the color property in the .as-sortable-drag class in the css of the library.

.as-sortable-drag { cursor: move; color: white; position: absolute; z-index: 9999; height: 350px !important; width: 170px !important; }

Good luck

[JDonadio]

Hi @Handresito, can you show me your list block in html please? The absolute position it's killing me. Thanks.

[Handresito]

        <ul class='magazinesNavigation' as-sortable="dragControlListeners" ng-model="currentCategory.magazines">
            <li as-sortable-item class="cardWiseNet" ng-repeat='magazine in currentCategory.magazines'>
                <div class="imgFrame" as-sortable-item-handle>
                    <div class="container-coverstand-options">
                    <div class="moveup" ng-click="moveUp(magazine)">TOP</div>
                    <div class="deletemag" ng-click="removeMagazine(magazine)">DELETE</div>
                    <a href="{{magazine.url}}" target="_blank">
                        <img class="magazineImg" ng-src="/{{magazine.iconUrl}}" alt="{{magazine.name}}" />
                    </a>
                    </div>
                </div>
            </li>
      </ul>

[Gargaroz]

Are you using the containment property within your dragControlListeners object?

[dellheng]

ng-sortable.css z-index is 9999

.as-sortable-drag {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
}

I resolve this issue add a style override it

.as-sortable-drag {
    z-index: 20000 !important;
}

[Gargaroz]

I solved this by leaving the <ul> element with just the class="list-group"; in fact I noticed the draggable item disappears when I added col-xs-12 to the <ul> element.

[damionvega]

I found out the sortable item jumps down the screen after you activate it to drag. I still haven't figured out how to fix this. Using @Handresito 's position: absolute; fix on the .as-sortable-dragging class doesn't work for me, it ruins the sorting and I can only place it at the top or bottom of the list. It seems a parent container needs position: relative?

Here's a screenshot of what happens when I click and drag "Address". The screenshot didn't render my mouse, but it's hovering where the green arrow is.

[damionvega]

I'm not sure what I did exactly (I'm fairly certain I'd already tried this code and it wasn't working) but the code below is working for me.

.category-list(
  data-as-sortable='draggableCategories'
  data-ng-model='entity.categories')

    .category-item(
      data-as-sortable-item
      data-ng-repeat='category in entity.categories'
      ng-click='categorySelected(category)'
      ng-class='{ selected: category._id === selectedCategory._id }')
        | {{category.name | label}}

        .drag-handle(data-as-sortable-item-handle)

.category-list
  .category-item
    position relative
    width 50%
    margin 1rem 0
    color $color-light
    font-weight 500
    cursor pointer

    &.selected
      color $blue-light

  .drag-handle
    position(absolute, 0)
    wh(100%, 1.5rem)
    cursor move

.as-sortable-dragging
  margin-top -1rem

.as-sortable-placeholder:before
  content '\e906'
  font-family 'icon'
  color green

$scope.draggableCategories = {
  itemMoved: function (event) {
    console.log('item moved')
  },

  orderChanged: function (event) {
    console.log('order changed')
  },

  containment: '.category-list',
  allowDuplicates: false
}

[lucas-garcia]

+1

[BorisWechselberger]

Here is what solved it for me: Make sure that all the relevant CSS code is not restricted by a parent selector. The dragged element will be directly added to the body element - so you have to write your CSS in a way that it still works there, when it's not a part of the list anymore.

[harrietjia]

.as-sortable-drag { position: absolute; left: 21px !important; margin-top: -195px !important; }

i do this in my code ,it work