1

I'm looking for a way to toggle the scrolling of a datatable when using a draggable link ala jqueryUI.

Due to space constraints I need a scrolling DataTable and due to UI requirements I need draggable links.

Example I fleshed out: http://jsfiddle.net/sqwgs6wb/8/

JavaScript from the sample:

$(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') );
}

Using jqueryUI I can detect when a datatable item(link) is being dragged and when it is done being dragged but the problem I'm running into is that the contents of the table shift around when I want to drag a link onto a drop area. Thus losing their place in the table.

I've looked on Stack and on datatables.net and I think it might be possible to access an extended function and freeze it but I'm not sure about how to do that.

I would very much like the contents of the table to not move when a user drags a draggable item from the datatable. Basically, freezing the table scroll in the X and Y axis would rock and naturally I would need the ability to unfreeze it.

John Aho
  • 31
  • 6

2 Answers2

1

I found a post that had a similar problem and verified that the solution fixes your problem in the fiddle. Here is the thread that discusses it

Draggable element hidden outside container

Basically, these 3 options need to be setup on your draggble setup

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

Here is a working update of the fiddle with these options

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

Community
  • 1
  • 1
Paul Zepernick
  • 1,452
  • 1
  • 11
  • 25
0

It's a JqueryUI issue, or rather my lack of knowledge of all the options.

The answer is to add appendTo to the jqueryUI Draggable initialization.

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"});

  })}

The appendTo 'body' option causes the draggable item to be created at the body level and not inside the scrollable container like it was before.

John Aho
  • 31
  • 6