Question

我希望保持页面上保存的拖动元素的状态，因为它甚至在使用jQuery刷新或重新加载页面之后。这是我下面给出的代码我不知道如何使用jQuery，我可以使用jQuery或我必须使用PHP或任何其他工具。请帮帮我。

$(function() {
    $( "ul li" ).each(function(){
        $(this).draggable({
            helper: "clone"
        });
    });
    
    $( ".day" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            var targetElem = $(this).attr("id");

            $( this ).addClass( "ui-state-highlight" );
            if($(ui.draggable).hasClass('draggable-source'))
                $( ui.draggable ).clone().appendTo( this ).removeClass('draggable-source').addClass('removeThis');
            else
                $( ui.draggable ).appendTo( this );
          
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
  
  
  // add "removeThis" class when drop in box and bind this live event
  $('#close').live("click",function(){
    if(confirm('Are you sure you want to remove this box?')){
	
         $(this).parents('.removeThis').remove();
      }
  });
		
});
		</script>

		h1 {font-family:Helvetica Neue, Helvetica, Arial, sans-serif;margin-top:0;font-size:36px;}
        td {
            text-align:;
			display:inline-block;
   
        }
        tr:first-child td {
            border-bottom:0;
            border-top:0;
        }
        tr:nth-child(2) td {
            border-top:0;
            border-bottom:0;
        }
        td:first-child {
            border-left:0;
        }
        td:last-child {
            border-right:0;
        }
        div.day {
            width:1000px;
			min-height: 300px;
            margin:0;
			border: 1px solid black;
			
        }
        div#drag {
            width:120px;
            height:40px;
            padding:5px;
            margin:5px;
            display:inline-block;
            text-align:center;
            line-height: 40px;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-weight: bold;
            font-size:18px;
            color:white;
            text-shadow:0 1px 0 grey;
            border:1px solid rgba(0,0,0,.1);
        }
        div#drag:hover {cursor:move;}
        div#subjects ul li {
            display:inline-block;
        }
        li, ul {
            list-style-type: none;
        }
		#div1 li {
    display: inline-block;
}
#close {
float:right;
padding=0;
margin:0;
font-size:8px; 
}

<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery UI Droppable - Default functionality</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
		
		
		
		
  </head>
  <body>
    <table id="days">
      <tr>
        <td>Drag and Drop here</td>


      </tr>
      <tr>
        <td>
          <div id="div1" class="day monday ui-widget-content">
          </div>
        </td>


      </tr>
    </table>
    <ul>
      <li class="draggable-source">
        <div style="background-color:brown;" id="drag">Element 1 <input type="button" id="close" value="X"> </div>
      </li>
      <li class="draggable-source">
        <div style="background-color:orange;" id="drag">Element 2 <input type="button" id="close" value="X"> </div>
      </li>
    
    </ul>
  </body>

</html>

在使用jQuery刷新或重新加载页面之后，甚至在页面上保存拖动的元素

0 个答案: