Question

I’m creating a day planner using jquery, draggable and droppable.

When a job is dragged from the unassigned column into a hour time slot, the original draggable item is removed, and a new div is placed into page, with the job details.

This newly created div block of code, has all the parameters in it to make it draggable . When it’s rendered on the page load, these assigned jobs are draggable .

It’s only when they are created on the fly using javascript is something occurring that stops them from being dragged about.

When I create these new div tags on the fly with Javascript, is there something I need to do to tell the jquery that these new items are meant to be dragged?

(thanks in advance as always)

Steps

• We have a div container with a list of jobs (more divs) inside it. #unassignedjobs is the parent div for these jobs, with the following jobs inside, #jobN ,#jobN2, #jobN3
• We have another area which we can drop these items into, and inside this area is a container for displaying jobs, per person, lets call these #person1 and #person2.
• The aim is to drag a job from the unassigned jobs list, and place it into the persons lists of jobs
• At the minute when I do this, I refresh all of the html inside of #person1 when an item is dropped and using ajax/php to remake the list of jobs for this person (#person1) and repopulate #person1 using innerHTML.

• Every time a page is created from php any jobs inside #person1 are present when jquery is activated, making them draggable. It’s only when the refresh and re-population of the innerHTML is ran are the items (#jobN or #jobN2) unable to be dragged

  var createdContent = httpRequest.responseText;

  jobcolp.innerHTML = createdContent;

Hopefully this makes the problem a little more clearer.

Answer 1

Simply apply draggable to the newly created DIV. If the DIV is exactly the same, except for position, you could also not recreate it, but just reposition it. This would retain all of it’s handlers.

 // remove, reposition, reapply handlers
 $('#jobN').remove().appendTo('#dayViewN').draggable();

or

 // reposition, retain handlers
 $('#jobN').appendTo('#dayViewN');