diff options
| -rw-r--r-- | bubble.html | 1 | ||||
| -rw-r--r-- | bubble.js | 36 |
2 files changed, 20 insertions, 17 deletions
diff --git a/bubble.html b/bubble.html index c6305d4..e50fab1 100644 --- a/bubble.html +++ b/bubble.html @@ -108,7 +108,6 @@ html, body { <body> <div id="infobox"> - <!-- TODO: make this bar the only initiator of dragging --> <div class="draggable"></div> <div class="content"> <ul class="status"> @@ -285,22 +285,26 @@ function processData(data) { // initialize information panel (function () { var infoPane = d3.select('#infobox'); - // SHIT: d3js cannot handle drag with nested elements --> stutter! - // BREAKS TEXT SELECTION :( - infoPane //.select('.draggable') - .call(d3.behavior.drag() - .on('drag', function () { - var changes = { - 'left': d3.event.dx, - 'top': d3.event.dy - }; - // add the differences to the old positions - for (var name in changes) { - var newValue = parseInt(infoPane.style(name)); - newValue += changes[name]; - infoPane.style(name, newValue + 'px'); - } - })); + infoPane.select('.draggable') + .on('mousedown', function () { + infoPane.call(d3.behavior.drag().on('drag', dragger)); + }) + .on('mouseup', function () { + infoPane.on('mousedown.drag', null); + }); + + function dragger() { + var changes = { + 'left': d3.event.dx, + 'top': d3.event.dy + }; + // add the differences to the old positions + for (var name in changes) { + var newValue = parseInt(infoPane.style(name)); + newValue += changes[name]; + infoPane.style(name, newValue + 'px'); + } + } }()); function run() { |