diff --git a/browser/components/SnippetTab.js b/browser/components/SnippetTab.js index 5423f3ed..39d684fc 100644 --- a/browser/components/SnippetTab.js +++ b/browser/components/SnippetTab.js @@ -85,6 +85,15 @@ class SnippetTab extends React.Component { }) } + handleDragStart (e) { + e.dataTransfer.dropEffect = 'move' + this.props.onDragStart(e) + } + + handleDrop (e) { + this.props.onDrop(e) + } + render () { const { isActive, snippet, isDeletable } = this.props return ( @@ -98,6 +107,9 @@ class SnippetTab extends React.Component { onClick={(e) => this.handleClick(e)} onDoubleClick={(e) => this.handleRenameClick(e)} onContextMenu={(e) => this.handleContextMenu(e)} + onDragStart={(e) => this.handleDragStart(e)} + onDrop={(e) => this.handleDrop(e)} + draggable='true' > {snippet.name.trim().length > 0 ? snippet.name @@ -127,6 +139,7 @@ class SnippetTab extends React.Component { } SnippetTab.propTypes = { + } export default CSSModules(SnippetTab, styles) diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index 51f14fae..6b18a5a0 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -236,6 +236,27 @@ class SnippetNoteDetail extends React.Component { }) } + handleTabDragStart (e, index) { + e.dataTransfer.setData('text/plain', index) + } + + handleTabDrop (e, index) { + const oldIndex = parseInt(e.dataTransfer.getData('text')) + + const snippets = this.state.note.snippets.slice() + const draggedSnippet = snippets[oldIndex] + snippets[oldIndex] = snippets[index] + snippets[index] = draggedSnippet + const snippetIndex = index + + const note = Object.assign({}, this.state.note, {snippets}) + this.setState({ note, snippetIndex }, () => { + this.save() + this.refs['code-' + index].reload() + this.refs['code-' + oldIndex].reload() + }) + } + handleTabDeleteButtonClick (e, index) { if (this.state.note.snippets.length > 1) { if (this.state.note.snippets[index].content.trim().length > 0) { @@ -511,6 +532,8 @@ class SnippetNoteDetail extends React.Component { onDelete={(e) => this.handleTabDeleteButtonClick(e, index)} onRename={(name) => this.renameSnippetByIndex(index, name)} isDeletable={note.snippets.length > 1} + onDragStart={(e) => this.handleTabDragStart(e, index)} + onDrop={(e) => this.handleTabDrop(e, index)} /> })