diff --git a/htdocs/samples/selection.html b/htdocs/samples/selection.html
index 9fc6811..3ad2b50 100644
--- a/htdocs/samples/selection.html
+++ b/htdocs/samples/selection.html
@@ -42,6 +42,7 @@
             enabled: true,
             grouped: true,
             multiple: true,
+            draggable: true
           },
           onclick: function (d, element) { console.log("onclick", d, element); },
           onselected: function (d, element) { console.log("onselected", d, element); },
diff --git a/src/config.js b/src/config.js
index 0972b12..958d3f7 100644
--- a/src/config.js
+++ b/src/config.js
@@ -54,6 +54,8 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         data_onmouseout: function () {},
         data_onselected: function () {},
         data_onunselected: function () {},
+        data_ondragstart: function () {},
+        data_ondragend: function () {},
         data_url: undefined,
         data_json: undefined,
         data_rows: undefined,
diff --git a/src/drag.js b/src/drag.js
index 56ab070..cc0b081 100644
--- a/src/drag.js
+++ b/src/drag.js
@@ -60,6 +60,7 @@ c3_chart_internal_fn.dragstart = function (mouse) {
     var $$ = this, config = $$.config;
     if ($$.hasArcType()) { return; }
     if (! config.data_selection_enabled) { return; } // do nothing if not selectable
+    $$.config.data_ondragstart.call($$);
     $$.dragStart = mouse;
     $$.main.select('.' + CLASS.chart).append('rect')
         .attr('class', CLASS.dragarea)
@@ -71,6 +72,7 @@ c3_chart_internal_fn.dragend = function () {
     var $$ = this, config = $$.config;
     if ($$.hasArcType()) { return; }
     if (! config.data_selection_enabled) { return; } // do nothing if not selectable
+    $$.config.data_ondragend.call($$);
     $$.main.select('.' + CLASS.dragarea)
         .transition().duration(100)
         .style('opacity', 0)