Drag & Drop

Drag Between Blocks

Try it yourself:

Edit in JSFiddle

HTML

<div id="froala-editor">
  <h3>Click here to edit the content</h3>
  <p><img id="edit" class="fr-fil fr-dib" src="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" alt="Old Clock" width="300"/></p>
  <p>The image can be dragged only between blocks and not inside them.</p>
</div>

JAVASCRIPT

<script>
  $(function() {
    $('div#froala-editor').froalaEditor({
      dragInline: false,
      toolbarButtons: ['bold', 'italic', 'underline', 'insertImage', 'insertLink', 'undo', 'redo'],
      pluginsEnabled: ['image', 'link', 'draggable']
    })
  });
</script>