SharePoint list drag and drop order

• Creating the page
• Drop JavaScript
• Drag JavaScript
• Binding the Events
• Updating the list items

• < a href=./Recent Wins.aspx> Recent Wins< /a> < /li>
  
• < a href=./Decision Pending.aspx> Decisions Pending< /a> < /li>
  
• < a href=./Action Required.aspx> Work in Progress< /a> < /li>
  
• < a href=./NewOpportunities.aspx> New Opportunities< /a> < /li>
  
• < a href=./Unsuccessful No Bid.aspx> Unsuccessful< /a> < /li>
  
• < a href=./No Bid.aspx> No Bid< /a> < /li>
  

For this post Im going to ignore the CSS needed to make the tabs look like tabs as Im focusing on the drag and drop functionality.

To implement drag and drop Im going to add some JavaScript to the Content Editor Webpart.

Drop JavaScript

Looking at the above html we can now use the following JavaScript to select the tabs and make them available for dropping items into.

[code lang=text]
$[ul.tabs-nav li]
[/code]

Drag JavaScript

Then within theDOM Explorer in IE I found that my listitems have a class of ms-draggable available. Nice and easy.

So the following JavaScript will get me the items in my list.

[code lang=text]
$[.ms-draggable]
[/code]

Binding the Events

Im now creating a JavaScript function AttachDragDrop to make the drag and drop work.

To make the title of the item draggable, I dont really need to do anything as Microsoft have already made the titles draggable by default. However I would like to collect the id of the list item and therefore Im binding the dragstart event with the following lines.

[code lang=text]
$[.ms-draggable]
.bind[dragstart, function [evt] {
evt.dataTransfer = evt.originalEvent.dataTransfer;
evt.dataTransfer.setData[text, this.parentElement.id];
}];
[/code]

Note thatthis.parentElement.id gets me to the id of the div around the link. So in the above example in the DOM Explorer this is giving me 4159. Thanks you Microsoft for making this easy!

So now every time Im dragging a title of an item Im getting some data set with the list items id, which I can then use during the drop event.

Now Im ready to implement the drop:

[code lang=text]
$[ul.tabs-nav li]
.bind[dragover, function [evt] {
evt.preventDefault[];
}]
.bind[dragenter, function [evt] {
evt.preventDefault[];
}]
.bind[drop, function [evt] {

// Here Im going to implement the drop code.
}
[/code]

Updating the list items

First I want to get the list item id that we stored during the dragstart event.

[code lang=text]
var id = evt.originalEvent.dataTransfer.getData[text]
[/code]

As Ive got multiple tabs that I may drag my items into I need to identify which one Ive dragged the item to.

[code lang=text]
var newStatus = this.textContent;
[/code]

So now my newStatus will contain the statuses that Ive implemented in my tabs.

So all Ive now got left to do is update the item in SharePoint and then hide the item from my list once the item has been updated successfully.

So first Im building my client context.

[code lang=text]
var siteUrl = / /mytenant.sharepoint.com/mylist;
var clientContext = new SP.ClientContext[siteUrl];
[/code]

then Ill get my list:

[code lang=text]
var oList = clientContext.get_web[].get_lists[].getByTitle[Pipeline];
[/code]

Then I get the item that I need to update

[code lang=text]
this.oListItem = oList.getItemById[id];
[/code]

Wow, this is easy!

Now I need to internal name of my choice field that I need to update. So Im going to my list settings and Im finding the internal field name in the Url:

Ahhh, people have been using spaces when creating the field. Always remember to create fields without spaces first and then rename the fields. In this case Im using the spaced out field name and replace the %5F with and underscore [ _ ] resulting inPipeline_x0020_Stage.

Then I checked out the choice values and unfortunately they dont match my tabs.

No worries, I simple create a bit of JavaScript that matches my tabs with values in the list column and then update the list item followed by an Async call.

[code lang=text]
switch[newStatus] {
case No Bid: this.oListItem.set_item[Pipeline_x0020_Stage, J No Bid];
break;
case Unsuccessful: this.oListItem.set_item[Pipeline_x0020_Stage, K Unsuccessful];
break;
case Decisions Pending: this.oListItem.set_item[Pipeline_x0020_Stage, F Solution evaluation];
break;
case Work in Progress: this.oListItem.set_item[Pipeline_x0020_Stage, E Propose Solution];
break;
case New Opportunity: this.oListItem.set_item[Pipeline_x0020_Stage, A New Opportunity];
break;
default: break;
}

this.oListItem.update[];

$[# + id].parent[].parent[].hide[];

clientContext.executeQueryAsync[onQuerySucceeded, onQueryFailed];
}];
[/code]

Then for completeness of this article Im including an onQuerySucceeded andonQueryFaileded, where Im returning some information to the console of the browser.

[code lang=text]
function onQuerySucceeded[] {

console.log[Item updated!];

}

function onQueryFailed[sender, args] {

console.log[Request failed. + args.get_message[] + \n + args.get_stackTrace[]];
}
[/code]

Related Post

• Co-Authoring in Power Apps
• Synchronize two data sources with Power Automate
• Handling SharePoint file locks with Power Automate child flows

• Microsoft Power Automate

Set the task priority in Microsoft Planner using Power Automate

For quite a while I've been looking to set the task priority in Microsoft Planner

• Microsoft Office 365

Co-Authoring in Power Apps

Recently Microsoft added the option to use Co-Authoring as an experimental feature to Power Apps.

• Microsoft Power Apps

Control access with RecordInfo and DataSourceInfo in Power Apps

When you create apps, you might find that different users get different things to do.

• Microsoft Power Apps

Loaddata, Savedata and Cleardata in Power Apps

Today I'm having a look at some of the preview features arriving in Power Apps.

• Microsoft Power Apps

Enable the new Power Automate pane feature

You might want to Enable the new Power Automate pane feature when you add a

• Microsoft Office 365

Synchronize two data sources with Power Automate

Over the last few weeks I've been asked a number of times how to setup