diff --git a/browser/components/SnippetTab.js b/browser/components/SnippetTab.js index 5423f3ed..2b963a5b 100644 --- a/browser/components/SnippetTab.js +++ b/browser/components/SnippetTab.js @@ -85,6 +85,19 @@ class SnippetTab extends React.Component { }) } + handleDragStart (e) { + e.dataTransfer.dropEffect = 'move' + this.props.onDragStart(e) + } + + handleDragEnd (e) { + this.props.onDragEnd(e) + } + + handleDrop (e) { + this.props.onDrop(e) + } + render () { const { isActive, snippet, isDeletable } = this.props return ( @@ -98,6 +111,10 @@ 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)} + onDragEnd={(e) => this.handleDragEnd(e)} + onDrop={(e) => this.handleDrop(e)} + draggable='true' > {snippet.name.trim().length > 0 ? snippet.name @@ -127,6 +144,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..ca20d6e5 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -236,6 +236,26 @@ 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-' + this.state.snippetIndex].reload() + }) + } + handleTabDeleteButtonClick (e, index) { if (this.state.note.snippets.length > 1) { if (this.state.note.snippets[index].content.trim().length > 0) { @@ -511,6 +531,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)} /> })