Jquery可拖动 - 如何在飞行中创建一个新的可拖动的div，然后可以拖动？ [英] Jquery Draggable - How do I create a new draggable div on the fly that can then be dragged?
问题描述
我正在使用jquery，draggable和droppable创建一个日间计划程序。
I'm creating a day planner using jquery, draggable and droppable.
当作业从未分配的列拖到一个小时的时间段时，原来的可拖动项目被删除，并且一个新的div被放置在页面中，并附有作业详细信息。
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.
这个新创建的div代码块，其中包含所有参数可拖当它在页面加载时呈现时，这些分配的作业是可拖动的。
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 .
只有当他们在飞行中创建时才使用javascript才能阻止他们被拖动
It's only when they are created on the fly using javascript is something occurring that stops them from being dragged about.
当我使用Javascript快速创建这些新的div标签时，需要做些什么来告诉jquery这些新项目是要拖动的？
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)
步骤
- 我们有一个div容器，其中包含作业列表（更多的div）。 #unassignedjobs是这些作业的父div，其中包含以下作业，#jobN，＃jobN2，＃jobN3
- 我们有另一个区域，我们可以将这些项目放入区域是用于显示工作的容器，每个人可以调用这些＃person1和＃person2。
- 目的是从未分配的作业列表中拖出一份工作，并将其放入人员作业列表
- 在执行此操作的时候，我将刷新＃person1中的所有html，当一个项目被删除并使用ajax / php重新制作这个人的工作列表（＃person1），并使用 innerHTML 重新填充＃person1。
-
每次从php创建一个页面任何作业当jquery被激活时，＃person1中存在，使得它们可以拖动。 只有当innerHTML的刷新和重新填充被运行时，才能够拖动项目（#jobN或＃jobN2）
- 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;
var createdContent = httpRequest.responseText;
jobcolp.innerHTML = createdContent;
jobcolp.innerHTML = createdContent;
希望这会使问题更加清晰一些。
Hopefully this makes the problem a little more clearer.
推荐答案
只需将draggable应用于新创建的DIV。如果DIV是完全相同的，除了位置，你也可以不重新创建它，但只是重新定位它。这将保留所有的处理程序。
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();
或
// reposition, retain handlers
$('#jobN').appendTo('#dayViewN');
这篇关于Jquery可拖动 - 如何在飞行中创建一个新的可拖动的div，然后可以拖动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
