I have a list of tasks/sections that need to be assigned to multiple set of user's. I have used JqueryUI's selectable elements to display the tasks and I have used Jquery token input (Facebook like) elements to make the screen as displayed in the attached image. This works but is not the best way to work. I want to reorganise the structure to make it seamless for the user and also be self explanatory. Keeping the User's section at the bottom with the Map button next to it and the sections/task section above them is somehow not pleasing experience. I tried putting them next to each other but it creates issues of width as the task/section names are lengthy and need space to display completely. Please suggest on how this can be reorganized to make it more user friendly.
You can do something like this if you are mapping tasks to users. List the tasks on one side and you can drag and drop the tasks onto the users. The user can then display the tasks that are mapped to them.
Also you could do a mouse over of the user and highlight the tasks in the list that are assigned to them or a mouse over of tasks and highlight the users that are mapped to them.
So in this instance tasks would be JQuery draggables and the users JQuery droppables.