3

I have problem in one of my project. Requirement is it be able to drag and drop items in list to change their order. I try with HTML5 http://msdn.microsoft.com/en-us/magazine/hh852596.aspx but i did't reach result. Any idea? Could anyone get me some tips, how to reach result with HTML5 and javascript.

Thank you very much!

Improve this question
1

Several tips:

  1. You can use SPListItemCollection.ReorderItems to actually change order of the items. Unfortunately, this method is not available from Client Object Model, thus you will have to use a custom web service or callback approach.
  2. You should create something like a "drag spot", similar to dotted drag spots in Gmail and alike, so clicking on this spot starts dragging process.
  3. IE 9- doesn't support dragging of most elements except anchors. In the article, anchors are dragged, so things are a bit easier. Thus, keep in mind: if you want HTML5 drag-n-drop for reordering list items, it will not work in IE9-. Thus you might want to consider using jQuery.UI drag-and-drop instead.
  4. I'd recommend starting with simple examples and trying to get some experience and some understanding of drag-n-drop mechanics, and all these aspects and gotchas. Then, after you're able to produce some basic examples, try to implement dragging of tr's on a separate html page, without any SharePoint. Finally, move your solution to SharePoint, using XsltListViewWebPart and the approach, described in the article. And if you have particular problems, don't hesitate to create questions here or on StackOverflow.

Dragging rows within a table could be a tricky task, especially because they're represented as tr's in SharePoint, not div's.

P.S. I'm the author of the article you mentioned in the question.

Improve this answer
0
1

You could adapt my open source project - http://sprello.codeplex.com/

It uses the JavaScript COM and jQuery to give a 'trello.com' like interface with the ability to change category and order by dragging.

If you've got a lot of items in your list you could take a performance hit if you just order things #1, #2, #3 etc - but you could get super smart and use ordering numbers 10, 20, 30 etc and then moving 30 in between 10 & 20 you only need to change it to 25. (Anyone who's ever programmed in BASIC will know where this comes from!)

This answer gives some more tips on where to start.

How can i reorder items or swap items in a list or lib(Drag and drop will be ideal)

Improve this answer
3
  • Hey!Thank you for your advice. I try your webpart solution on my sharepoint site and it's work great. But solution for my problem need to be connectable with another list webpart in sharepoint. I try to add code in VS for connection to another webpart list but it didn't work. :/
    – Jernej
    Jun 18 '12 at 8:04
  • I'll refer you back to the issue you logged. a) Its currently running in the sandbox model so SharePoint doesn't allow you to connect. b) What would you actually want it to DO? sprello.codeplex.com/workitem/15 - Oh source code is available so please feel free to work on it as you wish -submitting back your changes would be appreciated.
    – Ryan
    Jun 18 '12 at 8:12
  • I'm having agenda which is sharepoint list and title of angenda need to be dragble so that i can reorder titles. For that i use your sprello webpart wich is work great. But i having another sharepoint list wich need to be connectable with sprello title. So scenario is simthing like this. When i reorder agenda druring the session an people click on title in sprello another sharepoint list return some data related to sprello title.
    – Jernej
    Jun 18 '12 at 9:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.