Answers

• kthorngren Posts: 20,346Questions: 26Answers: 4,776

  May 2021 edited May 2021

  I might not understand how to recreate the issue but I tried the basic Editor and inline editing examples and was not able to recreate the problem. Are you able to recreate the problem with any of the Editor examples? If you can please let us know which example and the steps to recreate the problem.

  Kevin
• cj1005 Posts: 142Questions: 45Answers: 1

  May 2021

  Hi Kevin, thanks for looking at this, the examples you provided above do have the same issue, try highlighting and then dragging the contents of an element to another element and it should append the contents from the source element to the target element?

  If it doesn't do that for you, then that might suggest it is a setting in my browser.

  Chris
• cj1005 Posts: 142Questions: 45Answers: 1

  May 2021

  Just to add it is quite hard to replicate, as it does not seem consistent, but the issue does appear to be with drag and drop, so if I can find a way to disable this functionality that should solve it
• kthorngren Posts: 20,346Questions: 26Answers: 4,776

  May 2021 edited May 2021

  Got it. Yes, I'm able to do that by using the basic editor example. Didn't understand the steps initially. @allan or @colin will need to provide any steps, if possible, to stop the behavior.

  Kevin
• kthorngren Posts: 20,346Questions: 26Answers: 4,776

  May 2021

  You can see the same behavior in this non-editor example:
  https://datatables.net/examples/plug-ins/dom_sort.html

  Maybe you can try some of the options presented in this SO Thread.

  Kevin
• cj1005 Posts: 142Questions: 45Answers: 1

  May 2021

  Thank you Kevin, I will try using CSS to make draggable = false on all editor fields, I'll put my results....
• cj1005 Posts: 142Questions: 45Answers: 1

  May 2021

  Unfortunately draggable is not a CSS attribute :-(

  Any other ideas would be greatly appreciated?
• tangerine Posts: 3,350Questions: 37Answers: 394

  May 2021

  draggable is a HTML attribute, as explained in Kevin's SO link.
• kthorngren Posts: 20,346Questions: 26Answers: 4,776

  May 2021 Answer ✓

  See this example:
  http://live.datatables.net/guwafemu/194/edit

  It uses the Editor open event and creates the following event handler:

  editor.on( 'open', function ( e, mode, action ) {
     $('input').on('drop', function() {
       console.log('prevening drop');
       event.preventDefault();
     });
  } );
  

  Kevin
• cj1005 Posts: 142Questions: 45Answers: 1

  May 2021

  Brilliant!! Thank you Kevin

  This is what I added to block dropping for all inputs & textareas:

          // This disables drag & drop on all editor inputs & textareas
          qsjob_editor.on( 'open', function ( e, mode, action ) {
             console.log('Editor form opened, adding disable drop function');
             $('input').on('drop', function() {
               console.log('prevening drop');
               event.preventDefault();
             });
             $('textarea').on('drop', function() {
               console.log('prevening drop');
               event.preventDefault();
             });
          } );