Question

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

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

示例中的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

我发现了一个有类似问题的帖子，并验证该解决方案可以解决您的问题。这是讨论它的线程

Draggable element hidden outside container

基本上，需要在您的可拖动设置

上设置这3个选项

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

以下是这些选项的小提琴的工作更新

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

Answer 2

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

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

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

def Address < ActiveRecord::Base
  validates_with AddressValidator

  # ...
end

appendTo＆＃39; body＆＃39;选项导致可拖动项目在主体级别创建，而不是像以前那样在可滚动容器内创建。

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

2 个答案: