HTML

首先我们放置三个浮动层：

<div class="note blue ui-draggable" style="left: 232px; top: 152px; z-index: 6585; opacity: 1;"> 
   <span class="data">1.</span> 网站模板 
  </div> 
  <div class="note yellow ui-draggable" style="left: 409px; top: -21px; z-index: 6584; opacity: 1;"> 
   <span class="data">2.</span> 智慧小屋 
  </div> 
  <div class="note green ui-draggable" style="left: 587px; top: 155px; z-index: 6586; opacity: 1;"> 
   <span class="data">3.</span> 网页特效 
</div>

接着调用jquery ui插件：

<script type='text/javascript' src='js/jquery-ui.min.js'></script>

jQuery

最后我们在$(function()里定义了一个变量tmp，通过判断每个div.note的z-index值，保证拖动时，该DIV在最上层（即z-index为最大值），就是不会被别的层覆盖。

$(function() {
    var tmp;
    $('.note').each(function() {
        tmp = $(this).css('z-index');
        if (tmp > zIndex) zIndex = tmp;
    }) make_draggable($('.note'));
});

var zIndex = 0;
function make_draggable(elements) {
    elements.draggable({
        opacity: 0.8,
        containment: 'parent',
        start: function(e, ui) {
            ui.helper.css('z-index', ++zIndex);
        },
        stop: function(e, ui) {
            //                        $.get('ajax.php', {
            //                            x: ui.position.left,
            //                            y: ui.position.top,
            //                            z: zIndex,
            //                            id: parseInt(ui.helper.find('span.data').html())
            //                        });
        }
    });
}

看完本文后，你是不是会想到拖动保存更多实际的应用呢，本站在接下来的文章会通过贴便签的实例来讲解拖动保存的应用，敬请关注。