Closes #85

src/editor/Editor.jsx

@@ -335,7 +335,7 @@ export default class Editor extends Component {
     return (
       <Draggable 
         disabled={!this.props.detachable}
-        cancel=".r6o-btn, .r6o-nodrag, input, textarea" 
+        handle=".r6o-draggable" 
         onDrag={() => this.setState({ dragged: true })}>
 
         <div ref={this.element} className={this.state.dragged ? 'r6o-editor dragged' : 'r6o-editor'}>
@@ -365,7 +365,8 @@ export default class Editor extends Component {
                   onClick={this.onCancel}>{i18n.t('Close')}</button>
               </div>
             ) : (
-              <div className="r6o-footer">
+              <div 
+                className={this.props.detachable ? "r6o-footer r6o-draggable" : "r6o-footer"}>
                 { hasDelete && (
                   <button 
                     className="r6o-btn left delete-annotation" 

src/editor/widgets/comment/Comment.jsx

@@ -66,7 +66,7 @@ const Comment = props => {
           /> } 
           
       <div 
-        className={isMenuVisible ? "r6o-icon r6o-arrow-down r6o-nodrag r6o-menu-open" : "r6o-icon r6o-arrow-down r6o-nodrag"} 
+        className={isMenuVisible ? "r6o-icon r6o-arrow-down r6o-menu-open" : "r6o-icon r6o-arrow-down"} 
         onClick={() => setIsMenuVisible(!isMenuVisible)}>
         <ChevronDownIcon width={12} />
       </div>

src/editor/widgets/comment/DropdownMenu.jsx

@@ -10,7 +10,7 @@ const DropdownMenu = props => {
   useClickOutside(ref, () => props.onClickOutside());
 
   return (
-    <ul ref={ref} className="r6o-comment-dropdown-menu r6o-nodrag">
+    <ul ref={ref} className="r6o-comment-dropdown-menu">
       <li onClick={props.onEdit}>{i18n.t('Edit')}</li>
       <li onClick={props.onDelete}>{i18n.t('Delete')}</li>
     </ul>

src/editor/widgets/comment/TextEntryField.jsx

@@ -28,7 +28,7 @@ export default class TextEntryField extends Component {
     return (
       <TextareaAutosize
         ref={this.element}
-        className={this.props.editable ? 'r6o-editable-text r6o-nodrag' : 'r6o-editable-text'} 
+        className={this.props.editable ? 'r6o-editable-text' : 'r6o-editable-text r6o-draggable'} 
         value={this.props.content}
         placeholder={this.props.placeholder || i18n.t('Add a comment...')}
         disabled={!this.props.editable}

src/editor/widgets/tag/TagWidget.jsx

@@ -62,7 +62,7 @@ const TagWidget = props => {
   }
 
   return (
-    <div className="r6o-widget r6o-tag r6o-nodrag">
+    <div className="r6o-widget r6o-tag">
       { tags.length > 0 &&
         <ul className="r6o-taglist">
           { tags.map(tag =>

themes/default/editor/_editor.scss

@@ -131,11 +131,7 @@
   margin-top:4px;
 }
 
-.r6o-editor .r6o-nodrag * {
-  cursor:default !important;
-}
-
-.r6o-editor *:not(.r6o-nodrag, .r6o-btn, input, textarea) {
+.r6o-editor .r6o-draggable {
   cursor:move;
 }