Draggable Form

As with the template example, you may with to customise the behaviour of the Editor form. This example shows how the form can be made draggable. The code is slightly more complicated than necessary to be able to cope with the different styles that can be present on this page.

Thanks for mguinness - this example was based on their code.

This example uses the following code:

<script>
document.addEventListener('ct-ready', function(e) {
  var table = e.table;
  var editor = e.editor;
  var parent;

  editor.on('open', function(e, mode, action) {
    switch ($('#examples-style').val()) {
      case 'bs':
      case 'bs4':
      case 'bs5':
        $('.DTE_Header').addClass('draggable');
        parent = $('.DTE');
        break;
      case 'bm':
        $('.DTE_Header').addClass('draggable');
        parent = $('.modal-content');
        break;
      case 'zf':
      case 'se':
        $('.DTE_Header').addClass('draggable');
        parent = $('.DTED');
        break;
      case 'ju':
        $('.DTED').addClass('draggable');
        parent = $('.DTED');
        break;
      case 'dt':
      default:
        $('.DTE_Header').addClass('draggable');
        parent = $('.DTED_Lightbox_Content');
        break;
    }
  });

  $('.DTE_Header').css({'cursor' : 'move', 'z-index': '10'});

  $('body').on('mousedown', '.draggable', function (mousedownEvt) {
    var $draggable = $(this);
    var x = mousedownEvt.pageX - $draggable.offset().left,
        y = mousedownEvt.pageY - $draggable.offset().top;
    $('body').on('mousemove.draggable', function (mousemoveEvt) {
      parent.offset({
        'left': mousemoveEvt.pageX - x,
        'top': mousemoveEvt.pageY - y
      });
    });
    $('body').one('mouseup', function () {
      $('body').off('mousemove.draggable');
    });
    editor.one('close', function (e) {
      $(e.target.dom.wrapper.parentElement).css({ 'left': 'auto', 'top': 'auto' });
    });
  });
});
</script>