How to disable dragging of element contents when in an editor form

cj1005

Hi,

When I edit a record (using editor) and I highlight the contents of an element using a mouse drag (right to left) and there is another element to the left of the target element and I drag just slightly too far the contents of the target element are moved into the other element on the left.
So my question is, is there a way to disable dragging the element contents?

I'm hoping there is an obvious answer for this, so I've not created an example but if you need an example please let me know?

Cheers, Chris

kthorngren

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

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

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

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

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

Thank you Kevin, I will try using CSS to make draggable = false on all editor fields, I'll put my results....

cj1005

Unfortunately draggable is not a CSS attribute :-(

Any other ideas would be greatly appreciated?

tangerine

draggable is a HTML attribute, as explained in Kevin's SO link.

kthorngren

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

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();
           });
        } );