2009-08-08 48 views
0

下面是我爲我的網站的拖放,可以節省位置到MySQL 這是一對夫婦歲,雖然我想我的jQuery更新到新版本的全部代碼。遷移到jQuery的jQuery UI的

該代碼使用舊版本的jQuery 1.0.2和interface.js

我相信使用拖放與jQuery的較新版本的下降需要使用jQuery UI插件?

可別人誰瞭解的JavaScript/jQuery的幫助我得到這個工作有一個新的版本,當我嘗試使用它的jQuery的新版本,它不會工作

<script type="text/javascript" > 
var USER={"ID":"<?php echo $uid; ?>"}; 

var _x; 
var _y; 
var _pos; 
if(document.all){document.body.onload=b_onload;} 
else{document.body.setAttribute("onload","b_onload()");} 
function b_onload(){ 
    $('#columns td.portlet_td').each(function(i){ 
     $(this).children("br").remove(); 
    }); 
    $('#columns td.portlet_td').Sortable(
     { 
      accept: 'portlet', 
      helperclass: 'sort_placeholder', 
      activeclass : 'sortableactive', 
      opacity: 0.7, 
      tolerance: 'touch', 
      handle:'.drag-handler', 

      onStop:function(){ 

       var x = getPos(); 

       if(!$("#lgif").get(0)){ 
        $('<i'+'mg id="lgif" src="images/loading.gif" style="display:block;position:absolute;top:500px;left:50%;" />').appendTo('body'); 
       } 

       var __top = (document.body && document.body.scrollTop)?(document.body.scrollTop):((document.documentElement && document.documentElement.scrollTop)? document.documentElement.scrollTop: 0); 

       $("#lgif").css({top:__top+'px'}); 

       $("#lgif").show(); 
$.getJSON(
    '/processing/ajax/HOMEsaveposition.php', 
    { 
     uid:(USER.ID), 
     position:x 
    }, 
    function(json){ 
     $("#lgif").hide(); 
    } 
); 
      } 
     } 
    ); 



}; 

function getPos(){ 
    _pos=""; 
    $('#columns td.portlet_td').each(function(i){ 
     _x=i; 
     $(this).children(".portlet").each(function(j){ 
      _y=j; 
      var index = this.getAttribute("id").split('id')[1] - 100; 
      var pos=_x+":"+index; 
      _pos+=pos+"|"; 
     }); 
    }); 
    return _pos; 
} 
</script> 

回答

0

夫婦的改進(I」敢肯定這還不是全部,但應該可以幫助你開始)

我只想替換:與

if(document.all){document.body.onload=b_onload;} 
else{document.body.setAttribute("onload","b_onload()");} 
$('body').load(b_onload); 

下一頁您b_onload內()方法,你可以更換:

$('#columns td.portlet_td').each(function(i){ 
    $(this).children("br").remove(); 
}); 

$('#columns td.portlet_td br').remove(); 

至於你可以使用​​的排序。很難告訴你應該如何使用它,但有很多例子,我相信你會發現那些接近你想要的行爲的人可以很容易地適應你的應用程序。 jQuery UI有相當不錯的文檔。

0

教程NetTuts向您展示瞭如何使用jQuery UI構建可拖動的可排序接口。

你可以做一個,看看那裏的不同之處在於比較。

看看here