Question

我的问题是：“移动<li>时如何提醒？”

来自http://jqueryui.com/sortable/的示例我需要在<li>标记内的每个<ul id="sortable" >更改位置后捕获事件。 Maby正确的ansver在这里https://en.wikipedia.org/wiki/DOM_events#Common.2FW3C_events，但每次点击都会显示警报。 DOM更改后如何更改代码以查看警报？我的意思是当我们改变<li>相对于彼此的位置时。

 <!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8">          
         <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
         <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
         <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

         <style>
             #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
             #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
             #sortable li span { position: absolute; margin-left: -1.3em; }
         </style>
         <script>
             $(function() {
                 $( "#sortable" ).sortable();
                 $( "#sortable" ).disableSelection();
             });
         </script>
     </head>
     <body >         
         <ul id="sortable" >
             <li class="ui-state-default">
                 <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1
             </li>
             <li class="ui-state-default">
                 <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2
             </li>
             <li class="ui-state-default">
                  <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3
             </li>
             <li class="ui-state-default">
                 <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4
             </li>
             <li class="ui-state-default">
                 <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5
             </li>
             <li  class="ui-state-default">
                 <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6
             </li>
             <li  class="ui-state-default">
                 <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7
             </li>
         </ul>
         <script>        
             $(document).ready(function(){
                 //Subscribe to domChanged event
                 $("#sortable").bind('DOMNodeInserted', function(){
                     alert('Dom changed');
                 });
                 //Trigger the domChanged event
                 $(document).trigger('DOMNodeInserted');
             });        
         </script>
     </body>
 </html>

Answer 1

试试这个：

$( "#sortable" ).sortable({
  change:  function (event, ui) {
      alert("Changed");
  }
});

当DOM改变事件JavaScript时

1 个答案: