Javascript inside.HTML 不能与函数一起使用 - 创建可移动的 div

标签 javascript dom html drag-and-drop


我想从数据库中获取用户列表,在表中显示他们的姓名,当您单击某个姓名时,会出现一个特殊的 div 及其详细信息,您可以移动该 div 甚至关闭它。

这里是一个简短的代码编写方案:

<p></p> <p>function openDiv(id){<br/> document.getElementById('divsHere').innerHTML +='<<code>div id="moveable'+id+'"></code>content<code></div></code>'} </p> <pre><code> <?php database connection... while{ </code></pre> <p>...</p> <pre><code><tr onclick='openDiv( ". $row['id'] ." )'> $script += 'Drag.init(document.getElementById("moveable'+ $row['id'] +'"));' </code></pre> <p>...<br/></p> <p>}?> </p> <pre><code><div id="divsHere"></div> </code></pre> <p>echo $script;</p>

我使用过这个很棒的拖放库。 http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm (注意我对 jQuery 也有同样的问题)

当div被inner.HTML添加时,拖放功能似乎不起作用。但是,我没有看到任何其他方法。

感谢您的建议!

最佳答案

问题是当您执行 Drag.init 时,您提供给它的 div 尚未创建。

我建议你在 php 循环中生成各个 div,就像你对 th 标签所做的那样,删除 openDiv 开头的innerHTML 设置,这样就可以工作了。

但我不得不说,您似乎想要的是一个模式对话框,您可以找到已经制作好的并且易于在其他地方使用的对话框。例如:http://jqueryui.com/dialog/它会更容易使用,并且您可能会更喜欢最终结果。

我希望这有帮助:)

关于Javascript inside.HTML 不能与函数一起使用 - 创建可移动的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13808606/

相关文章:

javascript/ Selenium : get the window from the document object

jquery - 使用 <use> 标签更改 SVG 填充颜色不起作用

c# 字符串作为 html 属性

javascript - 开发工具中的缓慢光栅化

javascript - 在 'Access-Control-Allow-Origin' 设置为 '*' 的 connectjs 中提供静态文件

javascript - 当框架从 DOM 中删除时,内部运行的 JS 是否会从内存中清除?

html - 多重选择器是否适用于 :hover?

javascript - 使用 Protractor 检查 Angular ui 路由状态

javascript - 在循环内构建 onclick Javascript/jquery

javascript - 获取伪元素样式值