基本上我设置了一个带有一些可拖动元素的页面,它工作得很好。
我刚刚添加了一个刷新 div 的 ajax 内容刷新,元素在里面,每 10 秒一次。
执行此操作后,可拖动功能不再起作用。
我相信这是因为正在刷新的元素位于单独的页面上,然后使用 ajax 加载到索引中。
我该如何解决这个问题?
谢谢
基本 HTML(这里没什么特别的)
<div id="notes">
<!--Notes Load Here-->
</div>
<div id="loading">
Loading..
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/scripts.js"></script>
Scripts.js(包括文档就绪)
/* Draggable functionaility */
var a = 3;
$('.postit').draggable(
{
start: function(){
$(this).css("z-index", a++);
},
stop: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
var pid = $(this).attr('id');
var datastring = 'xpos=' + xPos + ' ypos=' + yPos + ' id=' + pid;
$.ajax({
type: "POST",
url: "savepositions.php",
datatype: "text",
data: {positions: datastring}
});
}
});
$('.postit').click(function(){
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", a++);
});
/* Auto Refresh */
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('#notes').hide();
$('#loading').show();
},
complete: function() {
$('#loading').hide();
$('#notes').show();
},
success: function() {
$('#loading').hide();
$('#notes').show();
}
});
var $container = $("#notes");
$container.load("notes.php");
var refreshId = setInterval(function()
{
$container.load('notes.php');
}, 10000);
Notes.php 出于所有意图和目的,这仅包含一个带有 class="postbit" 的 div