<div> inside a .sortable-element doesn't work

drhumlen commented 9 years ago

If you look at my example, I've placed a <div> inside the sortable, which seems to break everything. ( demo: http://plnkr.co/edit/DfMGxmjCYYxdua8lYSQU?p=preview )

My code:

  <div ng-sortable="items">
    <div class="sortable-element" ng-repeat="item in items">
      <div ng-style="{backgroundColor: item.color}">
        {{item.name}}, {{item.profession}}
      </div>
    </div>
  </div>

The original:

  <div ng-sortable="items">
    <div class="sortable-element" ng-repeat="item in items" ng-style="{backgroundColor: item.color}">
      {{item.name}}, {{item.profession}}
    </div>
  </div>

Having another level of nesting, e.g. a <div>, inside a .sortable-element seems to break it. Do you have any idea why? I want to make a sortable list of more than just plain text. I can try to help (pull-request) if you can point me in a direction. Also, are you able to replicate the error? And lastly, is there a way around this / am I doing something wrong?

natee commented 9 years ago

@drhumlen I have the same problem,maybe we can judge weather the trigger element's parents has a 'sortable-element' class before add a new class 'sortable-element-active'?

schartier commented 9 years ago

Sorry for the delay, I just updated index.html using inner div's but I was unable to reproduce the issue. My first guess, it's a css issue. If you find the exact problem it would be really nice from you to add a comment :)

schartier commented 9 years ago

I leave this thread open for anyone who could provide a better explanation.

schartier / angular-sortable

<div> inside a .sortable-element doesn't work #5