jquery - JQuery - 对此相当陌生

Question

我正在尝试使用jQuery在两个网格之间执行拖放操作。数据记录在一个mysql table. 当拖放成功时，我希望更新表中拖动记录的值。换句话说，我正在尝试记录元素已放入其中的单元格的 ID。不断收到“未定义”或NaN错误消息

这是jQuery代码： -

        $(document).ready(function() {
            $('#flights').html('Change List:<br/>'); // Set up change list div


    var sourceColIndex;
    var allowedClassArr = ['Instr','Capt','First']; 

      $('#tblSim td span').hover(function(){
                    $(this).css("background-color", "lightgreen");
                        }, function(){
                    $(this).css("background-color", "white");
      });

      $('#tblSim td span').draggable({
        revert: "invalid",
        zIndex: 100,
        start: function(event, ui) {

          var foo = $(ui.helper).parent(); // should return td

          sourceColIndex = foo.index();  //this is the column number



          $(ui.helper).css({
            padding: "2.5px 5px",
            border: "1px solid #ddd",
            background: "yellow"
          });

        }
      });      


      $('#tblSimBooking tr td').droppable({
        accept: "#tblSim td span",
        activeClass: "ui-state-highlight",

        drop: function(ev, ui) {

            //pick up the crew member details and date
            var itemid = ui.draggable.attr('emplid');
            var itemid1 = ui.draggable.attr('emplast');
            var itemid2 = ui.draggable.attr('rdate');
            //optional alert to help confirm
            alert ("Scheduling " + itemid + " " + itemid1 + " On " + itemid2);

              var $draggable = $(ui.draggable);

              var draggableClass = $draggable.attr('class'),

              draggableClass = draggableClass.split(' ');

              var $targetTD = $(ev.target); // should return td
              console.log($targetTD);
              var targetColInd = $targetTD.index();  
              console.log(targetColInd);


            var txt;
            var r = confirm("Confirm move for " + itemid1);
            if (r == true) {
                txt = "OK";
            } else {
                txt = "Cancel";
                $draggable.draggable('option', 'revert', true);
                return false;
            }               


          //no need to execute other codes if col index doesn't match[ supposed to match the dates]
          if(sourceColIndex != targetColInd) {
            $draggable.draggable('option', 'revert', true);
                return false;
          }
          var targetSpans =  $targetTD.find('span');


          //Check whether item is present, if present then revert, duplicate found.          
          var flag =false;
          $.each(targetSpans,function(i,v){
             if( $(this).hasClass(draggableClass[0])){
                 flag= true;
             }    
          });
          if(flag){
             //alert the user if necessary
                //alert('Duplicate '+draggableClass[0]+' found.');
                $draggable.draggable('option', 'revert', true);
                return false;
          }

         $(ui.draggable).detach().css({
              top: 'auto',
              left: 'auto',
              background: '#f3f3f3'
            }).appendTo(this);

      $.ajax({
         method: "POST",
         url: "update_sim_status.php",

        data:{'itemid': itemid,'itemid1': itemid1,'itemid2': itemid2}, 
      }).done(function( data ) {

            var result = $.parseJSON(data);
            //alert (result['success']);
            var itemstatus;
            if (result['success']==1) itemstatus = "OK";
            //display change log on page
            $('#flights').append(itemid+itemid1+itemid2+itemstatus+'<br/>');
       });


        }
      });
    });

这是我们要放入的网格的 HTML

    $simarray = array("400SIM-1","400SIM-2","400SIM-3","800SIM-1","800SIM-2","800SIM-3","800SIM-4","SAASIM-1","SAFSIM-1","SIMBLK");
for ($s=1; $s<=10; $s++) {
    echo '<tr><td>'.$simarray[$s];
    for ($d=1; $d<=20; $d++) {
            $date1 = date("M-d", strtotime($sd)+(($d-1)*86400));
            $date2 = date("Y-m-d", strtotime($sd)+(($d-1)*86400));
            echo '<td id5="xx"width="4%">';
            $q3r = mysqli_query($conn,'SELECT Roster_ID,Employee FROM roster WHERE Duty_ID LIKE "'.$simarray[$s].'" && Date="'.$date2.'" ');
            while ($r3r=  mysqli_fetch_array($q3r)) {
                echo $crewName[$r3r[1]].'<br/>';
            }
            echo '</td>';
    }
}

标签： jqueryjquery-ui-droppable