如何使页面加载（ajax）后生成的元素变得可拖动？

发布于 2024-12-02 12:05:15 字数 1572 浏览 0 评论 0原文

我的页面上有一个 div，每 2000 毫秒通过 ajax 调用单独的 php 脚本来填充该 div。当用户选中复选框时，更新间隔将停止，并且 div 中的所有项目都需要变为可拖动。如果我在没有更新间隔的情况下执行此操作，它会起作用，但是一旦我重新加载 div，项目就会失去其可拖动性。我如何维护它们的可拖动属性？

<SCRIPT LANGUAGE="JavaScript">
    $(window).load(function() {
      getScreen ();
    });


    var editMode = false;
    var intervalId = window.setInterval(getScreen ,2000);

    function getScreen () {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
            document.getElementById("refresh").innerHTML=xmlhttp.responseText;
          }
        }
        xmlhttp.open("POST","getScreen.php?sid="+<?php echo $sid; ?>,true);
        xmlhttp.send(); 

    }

    function onEditMode(cb) {
      if(cb.checked) { 
        editMode = true; 
        $('.item').draggable( 'enable' );
        window.clearInterval(intervalId);
      }
      else { 
        editMode = false;
        $('.item').draggable( 'disable' );
        intervalId = window.setInterval(getScreen ,2000); 
      }  
    }

    </SCRIPT>
  </head>
  <body>

    <div id="content">      
      <div class="post">            
         <div id="refresh">
         </div>     
      </div>        
    </div>

原文

I have a div on my page that gets populated via an ajax call to separate php script every 2000ms. When the user checks a checkbox, the update interval stops and all the items in the div need to become draggable. If I do this without the update interval it works, but once I have the div reloading the items loose their draggability. How can I maintain the their draggable property?

<SCRIPT LANGUAGE="JavaScript">
    $(window).load(function() {
      getScreen ();
    });


    var editMode = false;
    var intervalId = window.setInterval(getScreen ,2000);

    function getScreen () {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
            document.getElementById("refresh").innerHTML=xmlhttp.responseText;
          }
        }
        xmlhttp.open("POST","getScreen.php?sid="+<?php echo $sid; ?>,true);
        xmlhttp.send(); 

    }

    function onEditMode(cb) {
      if(cb.checked) { 
        editMode = true; 
        $('.item').draggable( 'enable' );
        window.clearInterval(intervalId);
      }
      else { 
        editMode = false;
        $('.item').draggable( 'disable' );
        intervalId = window.setInterval(getScreen ,2000); 
      }  
    }

    </SCRIPT>
  </head>
  <body>

    <div id="content">      
      <div class="post">            
         <div id="refresh">
         </div>     
      </div>        
    </div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一抹淡然 2024-12-09 12:05:15

覆盖容器 HTML 后，您应该在 Ajax 回调中使项目可拖动/不可拖动。由于一旦 HTML 被覆盖，任何附加的 DOM 监听器都会丢失。

var refresh = $('#refresh');
refresh.html(xmlhttp.responseText);
$('.item', refresh).draggable('enable');

是的，正如 @pduersteler 所说，jQuery 拥有出色的 Ajax 设施。 ~~load() 方法与您所做的完全一样 - 加载 HTML放入容器中。~~ $.post()是一个要走的路。

另外，您最好将 Ajax 回调中的 setInterval 替换为 setTimeout 。它将确保更流畅的更新体验。

var postData = { sid: <?=sid?> };

var container = $('#refresh');

var ajaxCallback = function (data) {
    container.html(data);

    var items = $('.item', container);

    if (editMode) {
        items.draggable('enable');
    } else {
        items.draggable('disable');
        setTimeout(getScreen, 2000);
    }
};

function getScreen() {
    $.post('/getScreen.php', postData, ajaxCallback);
}

getScreen();

You should make items draggable/non-draggable in the Ajax callback after you overwrite the container HTML. Since once is HTML overwritten, any attached DOM listeners are lost.

var refresh = $('#refresh');
refresh.html(xmlhttp.responseText);
$('.item', refresh).draggable('enable');

And yes, as @pduersteler said, jQuery has excellent Ajax facilities. ~~load() method does exactly what you do — loads HTML into a container.~~ $.post() is a way to go.

Also, you'd better replace setInterval with a setTimeout inside the Ajax callback. It will ensure smoother update experience.

var postData = { sid: <?=sid?> };

var container = $('#refresh');

var ajaxCallback = function (data) {
    container.html(data);

    var items = $('.item', container);

    if (editMode) {
        items.draggable('enable');
    } else {
        items.draggable('disable');
        setTimeout(getScreen, 2000);
    }
};

function getScreen() {
    $.post('/getScreen.php', postData, ajaxCallback);
}

getScreen();

回复收藏 0 原文

~没有更多了~