JQuery перетащить и падение не работает в тд

Question

Это сценарий, я использовал

$(function() { 

    $("#header").draggable({ 
    helper: "clone", 
    cursor: 'move', 
    tolerance: 'fit', 
    containment: '#shoppingCart2' 
}); 

    $("#shoppingCart2").droppable({ 

     drop: function (e, ui) { 

      if ($(ui.draggable)[0].id != "") { 
       x = ui.helper.clone(); 
      ui.helper.remove(); 
      x.draggable({ 
       helper: 'original', 
       containment: '#shoppingCart2 ', 
       tolerance: 'fit' 
      }); 

      x.appendTo('#container'); 
     } 

     } 
    }); 


}); 

Ниже HTML-код

  <div id="header" style="width:180px;"><span style="background-color:#FFFFFF">img</span></div><br /> 
     <br /> 

     <div id="container"> 



     <table width="200" id="shoppingCart2" border="1"> 
     <tr> 
     <td>test1</td> 
     <td id="t1" class="time"> td1&nbsp;</td> 
     <td id="t2" class="time">td2&nbsp;</td> 
     </tr> 
     <tr> 
     <td>test2</td> 
     <td class="time">&nbsp;</td> 
     <td class="time">&nbsp;</td> 
     </tr> 
     <tr> 
     <td>test3</td> 
     <td class="time">&nbsp;</td> 
     <td class="time">&nbsp;</td> 
     </tr> 
     <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
     <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
     </table> 
     </div> 

Сценарий я использовал это:

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js

http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js

, перетащив «img», он выпал в первом td каждой строки. я не мог отбросить это во 2-й и 3-й рядах каждой строки. Затем мне нужно взять соответствующий идентификатор td после его удаления. Пожалуйста, помогите мне.

Answer 1

Вы просто можете отказаться от TABLE # shoppingCart2, а не на td Вместо этого используйте «# shoppingCart2 td»!

$(function() { 

      $("#header").draggable({ 
       helper: "clone", 
       cursor: 'move', 
       tolerance: 'fit', 
      }); 

      $("#shoppingCart2 td").droppable({ 

       drop: function (e, ui) { 

        if ($(ui.draggable)[0].id != "") { 
         x = ui.helper.clone(); 
         ui.helper.remove(); 
         x.draggable({ 
          helper: 'original', 
          tolerance: 'fit' 
         }); 

         x.appendTo('#container'); 
        } 

       } 
      }); 


     }); 

Answer 2

Измените свой скрипт в соответствии с этим ....

$(function() { 

$("#header").draggable({ 
    helper: "clone", 
    cursor: 'move', 
    tolerance: 'fit', 
    containment: '#container'//use #container instead of #shoppingCart2 
}); 

$("#shoppingCart2 td").droppable({//use #shoppingCart2 instead of #shoppingCart2 td 

    drop: function (e, ui) { 

     if ($(ui.draggable)[0].id != "") { 
      x = ui.helper.clone(); 
      ui.helper.remove(); 
      x.draggable({ 
       helper: 'original', 
       containment: '#container',//use #container instead of #shoppingCart2 
       tolerance: 'fit' 
      }); 

      x.appendTo('#container'); 
     } 

    } 
}); 

}); 

РАБОТА DEMO