Migrer jQuery à jQuery UI

Question

Voici mon code complet pour le glisser-déposer de mon site, qui enregistre les positions dans mysql Ceci est un couple d'années et je voudrais mettre à jour ma jquery à une version plus récente.

Ce code utilise la version 1.0.2 et plus jquery interface.js

Je crois d'utiliser le glisser-déposer avec les versions les plus récentes de jquery nécessite l'utilisation du plug-in de l'interface utilisateur jquery?

Quelqu'un peut-il qui comprend javascript/jquery me aider à obtenir ce travail avec une version plus récente, quand j'essayer d'utiliser les nouvelles versions de jquery avec elle, il ne fonctionnera pas

<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> 

Answer 1

Couple d'améliorations (je suis sûr que ce n'est pas tout, mais devrait vous aider à démarrer)

Je voudrais juste le remplacer:

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

avec

$('body').load(b_onload); 

méthode suivante à l'intérieur de votre b_onload() vous pouvez remplacer:

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

avec

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

Quant au sortable, vous pouvez utiliser jQuery UI Sortable. Il est difficile de dire exactement comment vous devriez l'utiliser, mais il y a beaucoup d'exemples et je suis sûr que vous trouverez ceux qui seront proches de votre comportement désiré et vous pouvez facilement les adapter pour votre application. jQuery UI a une documentation assez sympa.

Answer 2

Le didacticiel NetTuts vous montre comment utiliser l'interface utilisateur jQuery pour créer une interface de tri pouvant être déplacée.

Vous pouvez faire une comparaison avec celui-ci pour voir où se trouvent les différences.

Regardez here.