In jquery draggable modal window how to prevent drag when scroll is done on table within draggable

0
votes

I have jquery modal window which is draggable. There is table inside window which has overflow-y set to true. When I scroll the table the window is getting dragged - how do I prevent drag on scroll operation. This is sample code.

 <div id="container">
<table style="overflow-y:auto;"> </table>
</div>

$('#container').draggable();

On scroll event on table how do I prevent drag on window? Can someone please help.

2
jqueryscrolldraggablemodal-dialog

2 Answers

0
votes

Use the jQueryUI dialog box. I have scrollable content in my dialogs and it works great.

http://jqueryui.com/demos/dialog/

edit

however, perhaps it's because you are checking for a mouse down anywhere within the dialog box which then triggers the move.

You will want to ensure that the drag event only triggers on say the title of the dialog.

 <div id="container">
 <div style=""height:30px" id="title">this is the title</div>
<table style="overflow-y:auto;"> </table>
</div>

$('#title').click(function(){$('#container').draggable();})

edit 2

$("#container").click(
  function(){
    if ($(this).tagName == "div")
      $(this).draggable();
  }
);

Untested but the intent should be clear

0
votes

Use cancel property from jQuery UI draggable:

<div id="container">
    <table style="overflow-y:auto;" id="tableID"> </table>
</div>

$(".container").draggable({
    cancel : ".tableID"
});