Question

我从一个表到另一个表具有简单的拖放功能，它在外观方面运行良好，但看起来我的drop方法没有被调用。

这是JQuery

<script>
  $(document).ready(function() {

  var $tabs=$('#table-draggable2')
  $( "tbody.connectedSortable" )
    .sortable({
        connectWith: ".connectedSortable",
        items: "> tr:not(:first)",
        appendTo: $tabs,
        helper:"clone",
        zIndex: 999990
    })
    .disableSelection();

   var $tab_items = $( ".nav-tabs > li", $tabs ).droppable(
   {
     accept: ".connectedSortable tr",
     hoverClass: "ui-state-hover",

     drop: function( event, ui ) 
    {
       alert("here!");
       return false;
    }
   });

   });
</script>

css

ul li {
min-width: 200px;
}
.dragging li.ui-state-hover {
   min-width: 240px;
}
.dragging .ui-state-hover a {
   color:green !important;
   font-weight: bold;
}
th,td {
   text-align: right;
   padding: 2px 4px;
   border: 1px solid;
}
  .connectedSortable tr, .ui-sortable-helper {
  cursor: move;
}
.connectedSortable tr:first-child {
   cursor: default;
}
.ui-sortable-placeholder {
   background: yellow;
}

并且这两个表只设置了ids

<table id='table-draggable1'
 ......
<table id='table-draggable2'
 .......

拖放在视觉上正常工作但我在drop方法中放置了一个警告并且它永远不会显示，为什么不调用drop方法？

<table id='table-draggable1'>  
            <tbody class="connectedSortable">  
                <tr>
                    <th>col1</th>
                    <th>col2</th>  
                    <th>col3</th>  
                    <th>col4</th>  
                </tr>
                <tr>   
                    <td>156</td>                                                                                         
                    <td>668</td>                                                              
                    <td>100.95</td>  
                    <td>1.82</td>                                                                  
                </tr>  
                <tr>  
                    <td>256</td>                                                                                         
                    <td>668</td>                                                              
                    <td>100.95</td> 
                    <td>1.82</td>                                                                
                </tr>  
            </tbody> 
        </table>
        <table id='table-draggable2'>  
            <tbody class="connectedSortable">  
                <tr>
                    <th>COL1</th>  
                    <th>COL2</th>  
                    <th>COL3</th>  
                    <th>COL4</th>  
                </tr>
                <tr>   
                    <td>356</td>                                                                                         
                    <td>668</td>                                                              
                    <td>100.95</td>  
                    <td>1.82</td>                                                                  
                </tr>  
                <tr>  
                    <td>456</td>                                                                                         
                    <td>668</td>                                                              
                    <td>100.95</td> 
                    <td>1.82</td>                                                                
                </tr>  
            </tbody> 
        </table>

Answer 1

如果我查看你的HTML这个选择器$ ( ".nav-tabs > li", $tabs)没有返回任何元素，所以没有初始化droppable对象。

我认为您正在寻找的选择器是$( "#table-draggable1 tr")，请参阅小提琴here。

没有调用JQuery drop函数

1 个答案: