D3 brush event troubles with jQWidgets dragdrop

Question

I have both D3 and jQWidgets mostly working well together, however jQWidgets is interfering with D3 brushes such that they won't respond to mouseup events.

You can see in this simplified example that brushing gets stuck in a brushing state whenever jqxDragDrop is used.

Code here:

var scale = d3.scale.linear().range([0, 100]);
var brush = d3.svg.brush()
    .x(scale)
    .y(scale)
;    
d3.select("#brush").append("g")
    .call(brush)
;
$("#draggable").jqxDragDrop({});  // Remove me to fix brush

#brush {
    width: 100px;
    height: 100px;
    background-color: yellow;
}
#draggable {
    width: 100px;
    height: 100px;
    background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<svg id="brush"></svg>
<div id="draggable"></div>

Interestingly, it seems to work fine when I use touch emulation on Chrome.

I don't have a lot of experience with javascript event debugging so I'm a bit stumped about how to proceed. Is it possible to fix without modifying the libraries? How should I approach figuring this out?