有没有办法在实例化后锁定/冻结jquery数据表？

Question

我正在寻找一种方式来切换使用可拖动链接ala jqueryUI的数据表滚动。

由于空间限制，我需要一个滚动的DataTable，并且由于UI需求，我需要可拖动的链接。

实施例I充实：从样品http://jsfiddle.net/sqwgs6wb/8/

JavaScript的：

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     "scrollX": true, 
     "scrollCollapse": true, 
     "bJQueryUI": true, 
     "scrollY": 140 }); 

    $(init1); 
    $(init2); 

    $(".makeMeDraggable").on("drag", function(event, ui) { 

     $('#status').html("dragging"); 
      }); 
    $(".makeMeDraggable").on("dragstop", function(event, ui) { 
    $('#status').html("Stopped dragging"); 
     }); 
}); 

function init1() { 
    $('.makeMeDraggable').each(function(i) { 
     $(this).draggable({ 
     revert: true, 
     delay: 100, 
     helper: "clone", 
     containment: "document"}); 

    })} 

    function init2() {  
    $('#makeMeDroppable').droppable({ 
    drop: handleDropEvent 
    }); 
} 

function handleDropEvent(event, ui) { 
    var draggable = ui.draggable; 
    alert('A Link was dropped onto me! with a URL of: ' + draggable.attr('href')); 
} 

使用jQueryUI的我可以检测何时一个数据表项（链接）被拖动，并且当完成被拖动它，但我遇到的问题是，当我想要将链接拖放到放置区域时，表格的内容会左右移动。因此失去了他们在桌子上的位置。

我看了Stack和datatables.net，我认为它可能访问扩展函数并冻结它，但我不知道如何做到这一点。

我非常喜欢当用户从数据表中拖动可拖动项目时不移动表格的内容。基本上，冻结X轴和Y轴上的桌面滚动会摇摆，自然我需要能够解冻它。

Answer 1

这是一个JqueryUI问题，或者说我缺乏对所有选项的了解。

答案是将appendTo添加到jqueryUI的Draggable初始化中。

http://jsfiddle.net/sqwgs6wb/9/

function init1() { 
    $('.makeMeDraggable').each(function(i) { 
     $(this).draggable({ 
     revert: true, 
     delay: 100, 
     helper: "clone", 
      appendTo: 'body', //<-==This is what fixed it. 
     containment: "document"}); 

    })} 

的appendTo“体”选项使拖动项目在体水平就像是之前的滚动容器内部没有被创建。

Answer 2

我发现一个帖子，有一个类似的问题，并验证该解决方案修复你的问题在小提琴。这里是讨论它

Draggable element hidden outside container

基本上，这3个选项需要在您的draggble设置

helper: 'clone', 
    revert: 'invalid', 
    appendTo: 'body' 

这里设置线程小提琴与这些选项的工作更新

http://jsfiddle.net/sqwgs6wb/11/