Using ui-sortable and ng-view?

[schan93]

Hi, I am having a problem using this library in combination with ng-view. In my file firstView.html I have routed embeddedView.html where the ng-view is and I want to drag and drop an html element from embeddedView.html into firstView.html. However, the html element from embeddedView.html, when dragged, always goes under the "z-tree-view tree" class in firstView.html and I'm not sure why. I've tried to make the z-index of the html element in embeddedView.html to a large number but that doesn't seem to help. Any ideas on how to fix this?

firstView.html:

...
<div jqyoui-droppable="{onDrop: 'onDrop()'}" data-drop = "true" class="z-tree-view tree">
....
</div>
<div ng-view></div>
....

embeddedView.html:
<ul empty-placeholder="{{'REPORT_DEFINE.DROP_FIELDS' | translate}}" class="items fieldsSortable col-lg-10 col-md-9 col-sm-9 col-xs-9" ng-class="{'empty-sortable': currentReport.viewFields.colFields.length == 0}" ui-sortable="dndConfig.sortableOption" ng-model="currentReport.viewFields.colFields"><li ng-repeat="field in currentReport.viewFields.colFields track by $index">

embeddedView.js:

        $scope.dndConfig = {
            sortableOption: {
                placeholder: "ui-state-highlight",
                connectWith: '.fieldsSortable',
                cursor: 'url(../images/closedhand.cur) 7 5, default',
                'ui-floating': true,
                start: function(e, ui) {
                    if(e.target) {
                        angular.element(e.target).addClass('draggingFields');
                    }
                }

embeddedView.css:

.draggingFields {
  position: relative;
  z-index: 5000;
}

[thgreasi]

Hi there! To be honest I have never used ui-sortable with for cross ng-view
sortings.
As a result, can you provide a codepen example for your use case (?)
(preferably by forking one of the exemples found in README) and I will do
my best to help you.

Thodoris Greasidis
Computer, Networking &
Communications Engineer