Using ui-sortable and ng-view? #432
Description
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;
}