刷新后保持可丢弃的最后一个位置

Question

我有一个.droppable事件的问题，我有两个部分可以移动我的元素，但在页面刷新后，我的位置返回到初始位置。 那么为了在页面刷新后保持元素的最后位置，必须做些什么？

小提琴：http://jsfiddle.net/jhogervorst/CPA5Y/

HTML：

<div class="group"> 
    <h1>Group 1</h1> 

    <ul class="parent"> 
     <li class="droppable"><span class="draggable">Item 1</span></li> 
     <li class="droppable"><span class="draggable">Item 2</span></li> 
     <li class="droppable"></li> 
    </ul> 
</div> 

<div class="group"> 
    <h1>Group 2</h1> 

    <ul class="parent"> 
     <li class="droppable"><span class="draggable">Item 3</span></li> 
     <li class="droppable"></li> 
     <li class="droppable"><span class="draggable">Item 4</span></li> 
    </ul> 
</div> 

CSS：

* { margin: 0; padding: 0; } 
body { font-family: Helvetica, Arial, sans-serif; } 
h1 { font-weight: bold; margin-bottom: 10px; } 

.group { 
    width: 150px; 
    margin: 5px 0 5px 5px; 
    float: left; 
} 

.parent { 
    list-style-type: none; 
} 

.parent li { 
    height: 41px; 
    margin-bottom: 5px; 
    padding: 5px; 
    background: #ddd; 
} 

.parent li.active { 
    background: yellow; 
} 

.parent li.hover { 
    background: orange; 
} 

.parent li.hover span { 
    opacity: .5; 
} 

.parent li span { 
    display: block; 
    height: 25px; 
    line-height: 25px; 
    padding: 5px; 
    background: #eee; 
    border: 3px solid #eee; 
    cursor: move; 
} 

.parent li span.ui-draggable-dragging { 
    z-index: 10; 
    border-color: red; 
} 



$(".draggable").draggable({ 
    revert: true, 
    revertDuration: 0 
}); 

的jQuery：

$(".droppable").droppable({ 
    activeClass: "active", 
    hoverClass: "hover", 

    accept: function (draggable) { 
     // The droppable (li element). 
     var droppable = $(this); 

     // The droppable which contains the draggable, i.e., the parent element of the draggable (li element). 
     var draggablesDropable = draggable.parent(); 

     // Is the draggable being dragged/sorted to the same group? 
     // => We could just sort it, because there's always enough space inside the group. 
     if (droppable.parent().is(draggablesDropable.parent())) { 
      return true; 
     } 

     // Nope, the draggable is being dragged/sorted to another group. 
     // => Is there an empty droppable left in the group to which the draggable is being dragged/sorted? 
     else if (droppable.parent().find(".draggable").size() < droppable.parent().find(".droppable").size()) { 
      return true; 
     } 

     // Nothing true? 
     return false; 
    }, 

    drop: function(event, ui) { 
     // The droppable (li element). 
     var droppable = $(this); 

     // The draggable (span element). 
     var draggable = ui.draggable; 

     // The droppable which contains the draggable, i.e., the parent element of the draggable (li element). 
     var draggablesDropable = draggable.parent(); 

     // Is the draggable being dragged to it's own droppable? 
     // => Abort, there's nothing to drag/sort! 
     if (droppable.is(draggablesDropable)) { 
      return; 
     } 

     // Is the draggable being dragged to an empty droppable? 
     else if (!droppable.find(".draggable").size()) { 
      // Just drop the draggable there. 
      droppable.append(draggable); 
     } 

     // Is the draggable being dragged/sorted to the same group? 
     // => We can just sort it, because there's always enough space inside the group. 
     else if (droppable.parent().is(draggablesDropable.parent())) { 
      // Is the draggable being dragged up? 
      if (droppable.parent().find(".droppable").index(draggablesDropable) > droppable.parent().find(".droppable").index(droppable)) { 
       // Add the dragged draggable's droppable before the droppable. 
       draggablesDropable.insertBefore(droppable); 
      } 

      // No, the draggable is being dragged down. 
      else { 
       // Add the dragged draggable's droppable after the droppable. 
       draggablesDropable.insertAfter(droppable); 
      } 
     } 

     // Nope, the draggable is being dragged/sorted to another group. 
     // => Is there an empty droppable left in the group to which the draggable is being dragged/sorted? 
     else if (droppable.parent().find(".draggable").size() < droppable.parent().find(".droppable").size()) { 
      // Find the first empty droppable in which the draggable is being dragged/sorted. 
      var emptyDroppable = $($.grep(droppable.parent().find(".droppable"), function (item) { 
       // Are there draggables inside this droppable? 
       // => Return TRUE if not. 
       return !$(item).find(".draggable").size(); 
      })).first(); 

      // Clone the dragged draggable's droppable before itself, because we need to remember it's position after moving it. 
      var draggablesDropableClone = draggablesDropable.clone().insertBefore(draggablesDropable); 

      // Is the draggable being dragged above the empty droppable? 
      if (droppable.parent().find(".droppable").index(emptyDroppable) > droppable.parent().find(".droppable").index(droppable)) { 
       // Add the dragged draggable's droppable before the droppable. 
       draggablesDropable.insertBefore(droppable); 
      } 

      // No, the draggable is being dragged below the empty droppable. 
      else { 
       // Add the dragged draggable's droppable after the droppable. 
       draggablesDropable.insertAfter(droppable); 
      } 

      // Remove the position of the dragged draggable, because there's still some css left of the dragging. 
      draggable.css({"top": 0, "left": 0}); 

      // Add the first empty droppable before the cloned draggable's droppable. Remove the latter afterwards. 
      draggablesDropableClone.before(emptyDroppable).remove(); 
     } 
    } 
}); 

Answer 1

位置将不会被保存在网页上。您可以将该职位传递给服务器并将其存储在那里。或者创建一个cookie来存储位置。