Jquery在Ajax加载的Div上拖放
Jquery Drag and Drop on Ajax loaded Div
我希望能够将页面上的一个元素拖动到加载了ajax的div中的可丢弃元素中。当我将可丢弃元素放置在常规页面中时,我可以让代码工作,但当我在加载ajax的div上有相同的元素时,就不能了。我很确定这是因为我调用脚本的方式以及它们在dom上的加载方式,但我找不到解决方案。注意:在调用jqueryui之前,我曾尝试调用加载ajax内容的代码,但也不起作用。以下是我调用一切的方式,为了简洁起见,我删除了多余的代码。
主页
<head>
<scripts -- jquery, jquery ui>
<script>
$(document).ready(function(){
$( "#site-preview" ).load( "/site/preview" );
});
</script>
</head>
<body>
<div class="draggable><img src=//etc/> </div>
//if I put this div here, I can drop to it, so i know the drop code works.
// <div class="droppable col-md-2" style="height:100px;border:1px solid gray"><p> </p></div>
<div id="site-preview"></div>
<script>
$(function() {
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
</body>
ajax加载的代码
<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
<p> </p>
</div>
这会追加,因为此时您试图在不存在的元素上调用droppable
。为了解决这个问题,可以使用可以附加到load
函数的回调函数,然后运行其余的函数。
$(document).ready(function(){
$("#site-preview").load("/site/preview", function() {
// Page loaded and injected
// We launch the rest of the code
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
});
您可以在此处找到有关load
函数的其他信息。回调可以接受参数,并且可以用来检查它是否是404。
我能够通过将可拖动/可丢弃的代码添加到ajax加载的div本身来使其工作。因此,上面的内容将像一样进行修改
ajax加载的代码
<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
<p> </p>
</div>
<script>
$(function() {
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false //stops scrolling container when moved outside boundaries
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
这些脚本行将从主页中删除
Ajax是异步。因此,如果您调用一些ajax,然后再调用其他命令,那么ajax通常会在之后完成。
这就是回调有用的地方。尝试向ajax load
调用添加回调,如下所示:http://api.jquery.com/load/
类似于:
$( "#site-preview" ).load( "/site/preview", function(){
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
附带说明:您可能应该开始使用脚本而不是<script>
标记。
相关文章:
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- HTML/CSS-用于拖放的全页面覆盖
- Rubaxa可与聚合物进行排序/拖放不起作用,具体取决于显示器:
- dblclick事件是在jquery拖放后触发的
- 无法进行拖放以使用本地存储
- 如何使用Java脚本创建提交按钮's的拖放功能
- Chrome原生拖放相对容器并不能正确渲染重影
- 如何在Javascript中创建排序、拖放多级列表
- html5拖放文件-在提交整个表单时上传
- 在jQuery UI中获取ul和li值,拖放即可排序
- HTML5拖放新图像并替换Div中的现有图像
- 如何使用jquery在不同的Div之间拖放
- 通过拖放计算放入 DIV 的 DIV 数量
- 锤子.js - 简单实现“拖放”DIV
- 在Div上拖放
- 在jQuery上更新Div隐藏字段可排序拖放更新
- Jquery在Ajax加载的Div上拖放
- 在网页上拖放一个Div
- 建议在so DIV也可以是拖放区域的地方编写/扩展JQuery拖放