Angular drag & drop with HTML5 For Service Portal?

[JDX7913]

I was wondering if anyone has got the Angular drag & drop to work for the service portal?

I am trying to replicate a widget that is similar to this. The problem I am running into is that I have no idea how to import and call the custom angular library that is in that link? Moreover, I have no idea if that is even possible with the service portal?

Thank you for your help. 

[Jon Barnes]

I haven't used that library, but I have built several portals with drag and drop interfaces using this library:

http://codef0rmer.github.io/angular-dragdrop/#!/

Incidentally, this is the same library that service now uses on the visual task boards so I knew I would be successful when I initially set out to do it. Let me know if you have any specific questions as you jump into it, but to get you started, here is an xml export of the angular JS dependency files that you would need to add to a widget to get started.

I will warn you, once you build somebody a drag and drop interface, everybody is going to want one 🙂

[JDX7913]

Thank you for the reply, but how do I add/include that in my widget?

Edit: Nevermind I figured it out. I import the XML and added the "Drag Drop" in the dependencies of my custom widget. 

However, now I have another question. Based on the example of the website that you've linked. I can display and move the button, but how do I see the list? I remembered awhile back from reading somewhere and basically, you can use like $scope.$watch and JSON to change the list in real-time. 

This is what I have, but of course, it doesn't work. What am I missing here?

HTML:

   <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">
        <div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" 
             jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}}</div>
        <div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" jqyoui-droppable style='height:50px;'>
          <div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list2.title">{{list2.title}}</div>
        </div>
     </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body"><pre>{{modelAsJson}}</pre></div>
    </div>

Client:

function ($scope) {
  /* widget controller */
  var c = this;
	
    $scope.models = {
        list: {
            1: [{title: 'AngularJS - Drag Me'}
            ],
            2 : [{}
                
            ]
        }
    };	

	
    $scope.$watch('models.list', function(model) {
        $scope.modelAsJson = angular.toJson(model, true);
    }, true);

	
}

Thank you for the help thus far.

[JDX7913 · Accepted solution]

Just an update on this post in case if anyone else wanted to do a drag and drop for their portal. After multiple trial and error, I was able to successfully get this library to work. 

All I did was add the library to my widget and copied and paste the code. 

[Alex307]

Would you be able/willing to provide more information on how you were able to get this to work? I'm unfamiliar with how dependencies and libraries work so I'm struggling to get started on this type of ask.