Project

General

Profile

Actions
Copy link

Task #80024

closed

DragDrop.js - show dragged element in front of every element

Added by Frank Rakow about 7 years ago. Updated over 6 years ago.

Status:
Closed
Priority:
Must have
Assignee:
-
Category:
Backend JavaScript
Target version:
-
Start date:
2017-02-26
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
8
PHP Version:
Tags:
Complexity:
Sprint Focus:

Description

Please extend the configuration with these two parameters:

            appendTo: $(document.body),
            helper: 'clone',

so the dragged element is displayed in front of every element during dragging and can be used with third party extension which creates multi column in elements (e.g. flux)

Here the changed code for typo3/sysext/backend/Resources/Public/JavaScript/LayoutModule/DragDrop.js (starting at line 43)
Insert appendTo and helper in the $(DragDrop.contentIdentifier).draggable configuration:

    DragDrop.initialize = function () {
        $(DragDrop.contentIdentifier).draggable({
            handle: this.dragHeaderIdentifier,
            scope: 'tt_content',
            cursor: 'move',
            distance: 20,
            addClasses: 'active-drag',
            revert: 'invalid',
            zIndex: 100,
            appendTo: $(document.body),
            helper: 'clone',
            start: function (evt, ui) {
                DragDrop.onDragStart($(this));
            },
            stop: function (evt, ui) {
                DragDrop.onDragStop($(this));
            }
        });

Actions
Copy link
 #1

Updated by Frank Rakow about 7 years ago

Frank Rakow wrote:

Sorry this is the correct changed code:

        $(DragDrop.contentIdentifier).draggable({
            handle: this.dragHeaderIdentifier,
            scope: 'tt_content',
            cursor: 'move',
            distance: 20,
            addClasses: 'active-drag',
            revert: 'invalid',
            zIndex: 100,
            appendTo: $(document.body),
            helper: 'clone',
            create: function(evt, ui) {
            },
            start: function (evt, ui) {
                DragDrop.onDragStart(ui.helper);
            },
            stop: function (evt, ui) {
                DragDrop.onDragStop(ui.helper);
            }
        });

Additional changes: DragDrop.onDragStart(ui.helper); and DragDrop.onDragStop(ui.helper);.
Use ui.helper instead of $(this) otherwise the displayed dragging element is wrong.

Actions
Copy link
 #2

Updated by Frank Nägler over 6 years ago

  • Status changed from New to Closed

This issue has been fixed already in v8 and master. I will close issue.
If you think this a wrong decision, feel free to open a new issue or re-open this issue.

Actions
Copy link

Also available in: Atom PDF