0

基本的に、いくつかのドラッグ可能な要素を含むページをセットアップしましたが、うまくいきました。

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 が含まれているだけです

4

1 に答える 1

0

お役に立てれば、

すべてのイベント バインダーを 1 つの関数内に配置し、その関数を呼び出します。

function wrapper(){
 $('.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++);
});
}

それから：

$(function(){
   wrapper(); // This does the binding on page load
});

そして、あなたのajax成功関数呼び出しで：

complete: function() {
    wrapper();
    $('#loading').hide();
    $('#notes').show();
},
于 2013-06-27T13:41:41.230 に答える