2013-03-15 143 views
1

更新:发现此故障单的故障http://bugs.jqueryui.com/ticket/5718。我尝试的位置:绝对,但它打破了HTML上的数据拖放错误

我已经实现拖放在我的应用程序来排序数据。拖动数据时,必须与其他数据对齐。但是在下面的图片中。

enter image description here

注意的是,当我拖累了互联网它会在上面。

拖动时必须与其他人对齐。如何解决这个问题?有没有办法让数据必须在光标上,而不是在拖动时在顶部?

这里是拖放代码:

<script> 
    var addPositions = function() { 
     $('.dropenv, .dropcat').each(function() { 
      var position = 0; 
      $(this).children().each(function() { 
       $(this).data('position', position); 
       position++; 
      }); 
     }); 
    }; 

    $(document).ready(function() { 
     addPositions(); 

     $(".dropenv").sortable({ 
      connectWith: "tbody.env-data", 
      dropOnEmpty: true, 
      handle: '.env-handle', 
      start: function(event, ui) { 
       parentID = ui.item.parent().siblings('tr').attr('id'); 
      }, 
      stop: function(event, ui) { 
       datas = new Array(); 
       var i = 0; 

       ui.item.closest('tbody').children('tr').each(function() { 
        datas[i] = $(this).attr('id'); 
        i++; 
       }); 

       $.ajax({ 
        type: "POST", 
        data: { 
         'cat_id': parentID, 
         'env[]': datas, 
         'csrfmiddlewaretoken': '{{ csrf_token }}' 
        }, 
        url:"/envelopes/sort/", 
        contentType: "application/json;charset=utf-8", 
        dataType: "json", 
        success: function(data) { 
         notify('', data, { autoClose: true, delay: 1000 }); 
        }, 
        error: function(ts) { 
         notify('', ts.responseText, { autoClose: true, delay: 1000 }); 
        } 
       }); 
      } 
     }); 

     $(".dropcat").sortable({ 
      connectWith: "tbody.cat-data", 
      dropOnEmpty: true, 
      handle: '.cat-handle', 
      update: function(){ 
       datas = new Array(); 
       var i = 0; 

       $('.dropcat tr.masterList').each(function() { 
        datas[i] = $(this).attr('id'); 
        i++; 
       }); 

       $.ajax({ 
        type: "POST", 
        data: { 
         'cat[]': datas, 
         'csrfmiddlewaretoken': '{{ csrf_token }}' 
        }, 
        url:"/envelopes/categories/sort/", 
        contentType: "application/json;charset=utf-8", 
        dataType: "json", 
        success: function(data) { 
         notify('', data, { autoClose: true, delay: 1000 }); 
        }, 
        error: function(ts) { 
         notify('', ts.responseText, { autoClose: true, delay: 1000 }); 
        } 
       }); 
      } 
     }); 
    }); 
    </script> 
+2

你需要证明你的代码。我们很少有足够的心理来诊断问题而不看代码。 – JJJ 2013-03-15 12:36:05

+0

对不起,我忘了。 – catherine 2013-03-15 12:40:50

回答

2

找到了答案:overflow:auto

<table class="simple-table responsive-table" style="overflow:auto">