Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use drag method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ddwtos.js

Source:ddwtos.js

1// This file is part of Moodle - http://moodle.org/2//3// Moodle is free software: you can redistribute it and/or modify4// it under the terms of the GNU General Public License as published by5// the Free Software Foundation, either version 3 of the License, or6// (at your option) any later version.7//8// Moodle is distributed in the hope that it will be useful,9// but WITHOUT ANY WARRANTY; without even the implied warranty of10// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the11// GNU General Public License for more details.12//13// You should have received a copy of the GNU General Public License14// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.15/**16 * JavaScript to make drag-drop into text questions work.17 *18 * Some vocabulary to help understand this code:19 *20 * The question text contains 'drops' - blanks into which the 'drags', the missing21 * words, can be put.22 *23 * The thing that can be moved into the drops are called 'drags'. There may be24 * multiple copies of the 'same' drag which does not really cause problems.25 * Each drag has a 'choice' number which is the value set on the drop's hidden26 * input when this drag is placed in a drop.27 *28 * These may be in separate 'groups', distinguished by colour.29 * Things can only interact with other things in the same group.30 * The groups are numbered from 1.31 *32 * The place where a given drag started from is called its 'home'.33 *34 * @module     qtype_ddwtos/ddwtos35 * @copyright  2018 The Open University36 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later37 * @since      3.638 */39define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys) {40    "use strict";41    /**42     * Object to handle one drag-drop into text question.43     *44     * @param {String} containerId id of the outer div for this question.45     * @param {boolean} readOnly whether the question is being displayed read-only.46     * @constructor47     */48    function DragDropToTextQuestion(containerId, readOnly) {49        this.containerId = containerId;50        if (readOnly) {51            this.getRoot().addClass('qtype_ddwtos-readonly');52        }53        this.resizeAllDragsAndDrops();54        this.cloneDrags();55        this.positionDrags();56    }57    /**58     * In each group, resize all the items to be the same size.59     */60    DragDropToTextQuestion.prototype.resizeAllDragsAndDrops = function() {61        var thisQ = this;62        this.getRoot().find('.answercontainer > div').each(function(i, node) {63            thisQ.resizeAllDragsAndDropsInGroup(64                thisQ.getClassnameNumericSuffix($(node), 'draggrouphomes'));65        });66    };67    /**68     * In a given group, set all the drags and drops to be the same size.69     *70     * @param {int} group the group number.71     */72    DragDropToTextQuestion.prototype.resizeAllDragsAndDropsInGroup = function(group) {73        var thisQ = this,74            dragHomes = this.getRoot().find('.draggrouphomes' + group + ' span.draghome'),75            maxWidth = 0,76            maxHeight = 0;77        // Find the maximum size of any drag in this groups.78        dragHomes.each(function(i, drag) {79            maxWidth = Math.max(maxWidth, Math.ceil(drag.offsetWidth));80            maxHeight = Math.max(maxHeight, Math.ceil(0 + drag.offsetHeight));81        });82        // The size we will want to set is a bit bigger than this.83        maxWidth += 8;84        maxHeight += 2;85        // Set each drag home to that size.86        dragHomes.each(function(i, drag) {87            thisQ.setElementSize(drag, maxWidth, maxHeight);88        });89        // Set each drop to that size.90        this.getRoot().find('span.drop.group' + group).each(function(i, drop) {91            thisQ.setElementSize(drop, maxWidth, maxHeight);92        });93    };94    /**95     * Set a given DOM element to be a particular size.96     *97     * @param {HTMLElement} element98     * @param {int} width99     * @param {int} height100     */101    DragDropToTextQuestion.prototype.setElementSize = function(element, width, height) {102        $(element).width(width).height(height).css('lineHeight', height + 'px');103    };104    /**105     * Invisible 'drag homes' are output by the renderer. These have the same properties106     * as the drag items but are invisible. We clone these invisible elements to make the107     * actual drag items.108     */109    DragDropToTextQuestion.prototype.cloneDrags = function() {110        var thisQ = this;111        thisQ.getRoot().find('span.draghome').each(function(index, draghome) {112            var drag = $(draghome);113            var placeHolder = drag.clone();114            placeHolder.removeClass();115            placeHolder.addClass('draghome choice' +116                thisQ.getChoice(drag) + ' group' +117                thisQ.getGroup(drag) + ' dragplaceholder');118            drag.before(placeHolder);119        });120    };121    /**122     * Update the position of drags.123     */124    DragDropToTextQuestion.prototype.positionDrags = function() {125        var thisQ = this,126            root = this.getRoot();127        // First move all items back home.128        root.find('span.draghome').not('.dragplaceholder').each(function(i, dragNode) {129            var drag = $(dragNode),130                currentPlace = thisQ.getClassnameNumericSuffix(drag, 'inplace');131            drag.addClass('unplaced')132                .removeClass('placed');133            drag.removeAttr('tabindex');134            if (currentPlace !== null) {135                drag.removeClass('inplace' + currentPlace);136            }137        });138        // Then place the once that should be placed.139        root.find('input.placeinput').each(function(i, inputNode) {140            var input = $(inputNode),141                choice = input.val(),142                place = thisQ.getPlace(input);143            // Record the last known position of the drop.144            var drop = root.find('.drop.place' + place),145                dropPosition = drop.offset();146            drop.data('prev-top', dropPosition.top).data('prev-left', dropPosition.left);147            if (choice === '0') {148                // No item in this place.149                return;150            }151            // Get the unplaced drag.152            var unplacedDrag = thisQ.getUnplacedChoice(thisQ.getGroup(input), choice);153            // Get the clone of the drag.154            var hiddenDrag = thisQ.getDragClone(unplacedDrag);155            if (hiddenDrag.length) {156                if (unplacedDrag.hasClass('infinite')) {157                    var noOfDrags = thisQ.noOfDropsInGroup(thisQ.getGroup(unplacedDrag));158                    var cloneDrags = thisQ.getInfiniteDragClones(unplacedDrag, false);159                    if (cloneDrags.length < noOfDrags) {160                        var cloneDrag = unplacedDrag.clone();161                        hiddenDrag.after(cloneDrag);162                        questionManager.addEventHandlersToDrag(cloneDrag);163                    } else {164                        hiddenDrag.addClass('active');165                    }166                } else {167                    hiddenDrag.addClass('active');168                }169            }170            // Send the drag to drop.171            thisQ.sendDragToDrop(thisQ.getUnplacedChoice(thisQ.getGroup(input), choice), drop);172        });173    };174    /**175     * Handles the start of dragging an item.176     *177     * @param {Event} e the touch start or mouse down event.178     */179    DragDropToTextQuestion.prototype.handleDragStart = function(e) {180        var thisQ = this,181            drag = $(e.target).closest('.draghome');182        var info = dragDrop.prepare(e);183        if (!info.start) {184            return;185        }186        drag.addClass('beingdragged');187        var currentPlace = this.getClassnameNumericSuffix(drag, 'inplace');188        if (currentPlace !== null) {189            this.setInputValue(currentPlace, 0);190            drag.removeClass('inplace' + currentPlace);191            var hiddenDrop = thisQ.getDrop(drag, currentPlace);192            if (hiddenDrop.length) {193                hiddenDrop.addClass('active');194                drag.offset(hiddenDrop.offset());195            }196        } else {197            var hiddenDrag = thisQ.getDragClone(drag);198            if (hiddenDrag.length) {199                if (drag.hasClass('infinite')) {200                    var noOfDrags = this.noOfDropsInGroup(this.getGroup(drag));201                    var cloneDrags = this.getInfiniteDragClones(drag, false);202                    if (cloneDrags.length < noOfDrags) {203                        var cloneDrag = drag.clone();204                        cloneDrag.removeClass('beingdragged');205                        hiddenDrag.after(cloneDrag);206                        questionManager.addEventHandlersToDrag(cloneDrag);207                        drag.offset(cloneDrag.offset());208                    } else {209                        hiddenDrag.addClass('active');210                        drag.offset(hiddenDrag.offset());211                    }212                } else {213                    hiddenDrag.addClass('active');214                    drag.offset(hiddenDrag.offset());215                }216            }217        }218        dragDrop.start(e, drag, function(x, y, drag) {219            thisQ.dragMove(x, y, drag);220        }, function(x, y, drag) {221            thisQ.dragEnd(x, y, drag);222        });223    };224    /**225     * Called whenever the currently dragged items moves.226     *227     * @param {Number} pageX the x position.228     * @param {Number} pageY the y position.229     * @param {jQuery} drag the item being moved.230     */231    DragDropToTextQuestion.prototype.dragMove = function(pageX, pageY, drag) {232        var thisQ = this;233        this.getRoot().find('span.drop.group' + this.getGroup(drag)).each(function(i, dropNode) {234            var drop = $(dropNode);235            if (thisQ.isPointInDrop(pageX, pageY, drop)) {236                drop.addClass('valid-drag-over-drop');237            } else {238                drop.removeClass('valid-drag-over-drop');239            }240        });241        this.getRoot().find('span.draghome.placed.group' + this.getGroup(drag)).not('.beingdragged').each(function(i, dropNode) {242            var drop = $(dropNode);243            if (thisQ.isPointInDrop(pageX, pageY, drop) && !thisQ.isDragSameAsDrop(drag, drop)) {244                drop.addClass('valid-drag-over-drop');245            } else {246                drop.removeClass('valid-drag-over-drop');247            }248        });249    };250    /**251     * Called when user drops a drag item.252     *253     * @param {Number} pageX the x position.254     * @param {Number} pageY the y position.255     * @param {jQuery} drag the item being moved.256     */257    DragDropToTextQuestion.prototype.dragEnd = function(pageX, pageY, drag) {258        var thisQ = this,259            root = this.getRoot(),260            placed = false;261        root.find('span.drop.group' + this.getGroup(drag)).each(function(i, dropNode) {262            var drop = $(dropNode);263            if (!thisQ.isPointInDrop(pageX, pageY, drop)) {264                // Not this drop.265                return true;266            }267            // Now put this drag into the drop.268            drop.removeClass('valid-drag-over-drop');269            thisQ.sendDragToDrop(drag, drop);270            placed = true;271            return false; // Stop the each() here.272        });273        root.find('span.draghome.placed.group' + this.getGroup(drag)).not('.beingdragged').each(function(i, placedNode) {274            var placedDrag = $(placedNode);275            if (!thisQ.isPointInDrop(pageX, pageY, placedDrag) || thisQ.isDragSameAsDrop(drag, placedDrag)) {276                // Not this placed drag.277                return true;278            }279            // Now put this drag into the drop.280            placedDrag.removeClass('valid-drag-over-drop');281            var currentPlace = thisQ.getClassnameNumericSuffix(placedDrag, 'inplace');282            var drop = thisQ.getDrop(drag, currentPlace);283            thisQ.sendDragToDrop(drag, drop);284            placed = true;285            return false; // Stop the each() here.286        });287        if (!placed) {288            this.sendDragHome(drag);289        }290    };291    /**292     * Animate a drag item into a given place (or back home).293     *294     * @param {jQuery|null} drag the item to place. If null, clear the place.295     * @param {jQuery} drop the place to put it.296     */297    DragDropToTextQuestion.prototype.sendDragToDrop = function(drag, drop) {298        // Is there already a drag in this drop? if so, evict it.299        var oldDrag = this.getCurrentDragInPlace(this.getPlace(drop));300        if (oldDrag.length !== 0) {301            var currentPlace = this.getClassnameNumericSuffix(oldDrag, 'inplace');302            var hiddenDrop = this.getDrop(oldDrag, currentPlace);303            hiddenDrop.addClass('active');304            oldDrag.addClass('beingdragged');305            oldDrag.offset(hiddenDrop.offset());306            this.sendDragHome(oldDrag);307        }308        if (drag.length === 0) {309            this.setInputValue(this.getPlace(drop), 0);310            if (drop.data('isfocus')) {311                drop.focus();312            }313        } else {314            this.setInputValue(this.getPlace(drop), this.getChoice(drag));315            drag.removeClass('unplaced')316                .addClass('placed inplace' + this.getPlace(drop));317            drag.attr('tabindex', 0);318            this.animateTo(drag, drop);319        }320    };321    /**322     * Animate a drag back to its home.323     *324     * @param {jQuery} drag the item being moved.325     */326    DragDropToTextQuestion.prototype.sendDragHome = function(drag) {327        var currentPlace = this.getClassnameNumericSuffix(drag, 'inplace');328        if (currentPlace !== null) {329            drag.removeClass('inplace' + currentPlace);330        }331        drag.data('unplaced', true);332        this.animateTo(drag, this.getDragHome(this.getGroup(drag), this.getChoice(drag)));333    };334    /**335     * Handles keyboard events on drops.336     *337     * Drops are focusable. Once focused, right/down/space switches to the next choice, and338     * left/up switches to the previous. Escape clear.339     *340     * @param {KeyboardEvent} e341     */342    DragDropToTextQuestion.prototype.handleKeyPress = function(e) {343        var drop = $(e.target).closest('.drop');344        if (drop.length === 0) {345            var placedDrag = $(e.target);346            var currentPlace = this.getClassnameNumericSuffix(placedDrag, 'inplace');347            if (currentPlace !== null) {348                drop = this.getDrop(placedDrag, currentPlace);349            }350        }351        var currentDrag = this.getCurrentDragInPlace(this.getPlace(drop)),352            nextDrag = $();353        switch (e.keyCode) {354            case keys.space:355            case keys.arrowRight:356            case keys.arrowDown:357                nextDrag = this.getNextDrag(this.getGroup(drop), currentDrag);358                break;359            case keys.arrowLeft:360            case keys.arrowUp:361                nextDrag = this.getPreviousDrag(this.getGroup(drop), currentDrag);362                break;363            case keys.escape:364                break;365            default:366                questionManager.isKeyboardNavigation = false;367                return; // To avoid the preventDefault below.368        }369        if (nextDrag.length) {370            nextDrag.data('isfocus', true);371            nextDrag.addClass('beingdragged');372            var hiddenDrag = this.getDragClone(nextDrag);373            if (hiddenDrag.length) {374                if (nextDrag.hasClass('infinite')) {375                    var noOfDrags = this.noOfDropsInGroup(this.getGroup(nextDrag));376                    var cloneDrags = this.getInfiniteDragClones(nextDrag, false);377                    if (cloneDrags.length < noOfDrags) {378                        var cloneDrag = nextDrag.clone();379                        cloneDrag.removeClass('beingdragged');380                        cloneDrag.removeAttr('tabindex');381                        hiddenDrag.after(cloneDrag);382                        questionManager.addEventHandlersToDrag(cloneDrag);383                        nextDrag.offset(cloneDrag.offset());384                    } else {385                        hiddenDrag.addClass('active');386                        nextDrag.offset(hiddenDrag.offset());387                    }388                } else {389                    hiddenDrag.addClass('active');390                    nextDrag.offset(hiddenDrag.offset());391                }392            }393        } else {394            drop.data('isfocus', true);395        }396        e.preventDefault();397        this.sendDragToDrop(nextDrag, drop);398    };399    /**400     * Choose the next drag in a group.401     *402     * @param {int} group which group.403     * @param {jQuery} drag current choice (empty jQuery if there isn't one).404     * @return {jQuery} the next drag in that group, or null if there wasn't one.405     */406    DragDropToTextQuestion.prototype.getNextDrag = function(group, drag) {407        var choice,408            numChoices = this.noOfChoicesInGroup(group);409        if (drag.length === 0) {410            choice = 1; // Was empty, so we want to select the first choice.411        } else {412            choice = this.getChoice(drag) + 1;413        }414        var next = this.getUnplacedChoice(group, choice);415        while (next.length === 0 && choice < numChoices) {416            choice++;417            next = this.getUnplacedChoice(group, choice);418        }419        return next;420    };421    /**422     * Choose the previous drag in a group.423     *424     * @param {int} group which group.425     * @param {jQuery} drag current choice (empty jQuery if there isn't one).426     * @return {jQuery} the next drag in that group, or null if there wasn't one.427     */428    DragDropToTextQuestion.prototype.getPreviousDrag = function(group, drag) {429        var choice;430        if (drag.length === 0) {431            choice = this.noOfChoicesInGroup(group);432        } else {433            choice = this.getChoice(drag) - 1;434        }435        var previous = this.getUnplacedChoice(group, choice);436        while (previous.length === 0 && choice > 1) {437            choice--;438            previous = this.getUnplacedChoice(group, choice);439        }440        // Does this choice exist?441        return previous;442    };443    /**444     * Animate an object to the given destination.445     *446     * @param {jQuery} drag the element to be animated.447     * @param {jQuery} target element marking the place to move it to.448     */449    DragDropToTextQuestion.prototype.animateTo = function(drag, target) {450        var currentPos = drag.offset(),451            targetPos = target.offset(),452            thisQ = this;453        M.util.js_pending('qtype_ddwtos-animate-' + thisQ.containerId);454        // Animate works in terms of CSS position, whereas locating an object455        // on the page works best with jQuery offset() function. So, to get456        // the right target position, we work out the required change in457        // offset() and then add that to the current CSS position.458        drag.animate(459            {460                left: parseInt(drag.css('left')) + targetPos.left - currentPos.left,461                top: parseInt(drag.css('top')) + targetPos.top - currentPos.top462            },463            {464                duration: 'fast',465                done: function() {466                    $('body').trigger('qtype_ddwtos-dragmoved', [drag, target, thisQ]);467                    M.util.js_complete('qtype_ddwtos-animate-' + thisQ.containerId);468                }469            }470        );471    };472    /**473     * Detect if a point is inside a given DOM node.474     *475     * @param {Number} pageX the x position.476     * @param {Number} pageY the y position.477     * @param {jQuery} drop the node to check (typically a drop).478     * @return {boolean} whether the point is inside the node.479     */480    DragDropToTextQuestion.prototype.isPointInDrop = function(pageX, pageY, drop) {481        var position = drop.offset();482        return pageX >= position.left && pageX < position.left + drop.width()483                && pageY >= position.top && pageY < position.top + drop.height();484    };485    /**486     * Set the value of the hidden input for a place, to record what is currently there.487     *488     * @param {int} place which place to set the input value for.489     * @param {int} choice the value to set.490     */491    DragDropToTextQuestion.prototype.setInputValue = function(place, choice) {492        this.getRoot().find('input.placeinput.place' + place).val(choice);493    };494    /**495     * Get the outer div for this question.496     *497     * @returns {jQuery} containing that div.498     */499    DragDropToTextQuestion.prototype.getRoot = function() {500        return $(document.getElementById(this.containerId));501    };502    /**503     * Get drag home for a given choice.504     *505     * @param {int} group the group.506     * @param {int} choice the choice number.507     * @returns {jQuery} containing that div.508     */509    DragDropToTextQuestion.prototype.getDragHome = function(group, choice) {510        if (!this.getRoot().find('.draghome.dragplaceholder.group' + group + '.choice' + choice).is(':visible')) {511            return this.getRoot().find('.draggrouphomes' + group +512                ' span.draghome.infinite' +513                '.choice' + choice +514                '.group' + group);515        }516        return this.getRoot().find('.draghome.dragplaceholder.group' + group + '.choice' + choice);517    };518    /**519     * Get an unplaced choice for a particular group.520     *521     * @param {int} group the group.522     * @param {int} choice the choice number.523     * @returns {jQuery} jQuery wrapping the unplaced choice. If there isn't one, the jQuery will be empty.524     */525    DragDropToTextQuestion.prototype.getUnplacedChoice = function(group, choice) {526        return this.getRoot().find('.draghome.group' + group + '.choice' + choice + '.unplaced').slice(0, 1);527    };528    /**529     * Get the drag that is currently in a given place.530     *531     * @param {int} place the place number.532     * @return {jQuery} the current drag (or an empty jQuery if none).533     */534    DragDropToTextQuestion.prototype.getCurrentDragInPlace = function(place) {535        return this.getRoot().find('span.draghome.inplace' + place);536    };537    /**538     * Return the number of blanks in a given group.539     *540     * @param {int} group the group number.541     * @returns {int} the number of drops.542     */543    DragDropToTextQuestion.prototype.noOfDropsInGroup = function(group) {544        return this.getRoot().find('.drop.group' + group).length;545    };546    /**547     * Return the number of choices in a given group.548     *549     * @param {int} group the group number.550     * @returns {int} the number of choices.551     */552    DragDropToTextQuestion.prototype.noOfChoicesInGroup = function(group) {553        return this.getRoot().find('.draghome.group' + group).length;554    };555    /**556     * Return the number at the end of the CSS class name with the given prefix.557     *558     * @param {jQuery} node559     * @param {String} prefix name prefix560     * @returns {Number|null} the suffix if found, else null.561     */562    DragDropToTextQuestion.prototype.getClassnameNumericSuffix = function(node, prefix) {563        var classes = node.attr('class');564        if (classes !== '') {565            var classesArr = classes.split(' ');566            for (var index = 0; index < classesArr.length; index++) {567                var patt1 = new RegExp('^' + prefix + '([0-9])+$');568                if (patt1.test(classesArr[index])) {569                    var patt2 = new RegExp('([0-9])+$');570                    var match = patt2.exec(classesArr[index]);571                    return Number(match[0]);572                }573            }574        }575        return null;576    };577    /**578     * Get the choice number of a drag.579     *580     * @param {jQuery} drag the drag.581     * @returns {Number} the choice number.582     */583    DragDropToTextQuestion.prototype.getChoice = function(drag) {584        return this.getClassnameNumericSuffix(drag, 'choice');585    };586    /**587     * Given a DOM node that is significant to this question588     * (drag, drop, ...) get the group it belongs to.589     *590     * @param {jQuery} node a DOM node.591     * @returns {Number} the group it belongs to.592     */593    DragDropToTextQuestion.prototype.getGroup = function(node) {594        return this.getClassnameNumericSuffix(node, 'group');595    };596    /**597     * Get the place number of a drop, or its corresponding hidden input.598     *599     * @param {jQuery} node the DOM node.600     * @returns {Number} the place number.601     */602    DragDropToTextQuestion.prototype.getPlace = function(node) {603        return this.getClassnameNumericSuffix(node, 'place');604    };605    /**606     * Get drag clone for a given drag.607     *608     * @param {jQuery} drag the drag.609     * @returns {jQuery} the drag's clone.610     */611    DragDropToTextQuestion.prototype.getDragClone = function(drag) {612        return this.getRoot().find('.draggrouphomes' +613            this.getGroup(drag) +614            ' span.draghome' +615            '.choice' + this.getChoice(drag) +616            '.group' + this.getGroup(drag) +617            '.dragplaceholder');618    };619    /**620     * Get infinite drag clones for given drag.621     *622     * @param {jQuery} drag the drag.623     * @param {Boolean} inHome in the home area or not.624     * @returns {jQuery} the drag's clones.625     */626    DragDropToTextQuestion.prototype.getInfiniteDragClones = function(drag, inHome) {627        if (inHome) {628            return this.getRoot().find('.draggrouphomes' +629                this.getGroup(drag) +630                ' span.draghome' +631                '.choice' + this.getChoice(drag) +632                '.group' + this.getGroup(drag) +633                '.infinite').not('.dragplaceholder');634        }635        return this.getRoot().find('span.draghome' +636            '.choice' + this.getChoice(drag) +637            '.group' + this.getGroup(drag) +638            '.infinite').not('.dragplaceholder');639    };640    /**641     * Get drop for a given drag and place.642     *643     * @param {jQuery} drag the drag.644     * @param {Integer} currentPlace the current place of drag.645     * @returns {jQuery} the drop's clone.646     */647    DragDropToTextQuestion.prototype.getDrop = function(drag, currentPlace) {648        return this.getRoot().find('.drop.group' + this.getGroup(drag) + '.place' + currentPlace);649    };650    /**651     * Check that the drag is drop to it's clone.652     *653     * @param {jQuery} drag The drag.654     * @param {jQuery} drop The drop.655     * @returns {boolean}656     */657    DragDropToTextQuestion.prototype.isDragSameAsDrop = function(drag, drop) {658        return this.getChoice(drag) === this.getChoice(drop) && this.getGroup(drag) === this.getGroup(drop);659    };660    /**661     * Singleton that tracks all the DragDropToTextQuestions on this page, and deals662     * with event dispatching.663     *664     * @type {Object}665     */666    var questionManager = {667        /**668         * {boolean} used to ensure the event handlers are only initialised once per page.669         */670        eventHandlersInitialised: false,671        /**672         * {boolean} is keyboard navigation or not.673         */674        isKeyboardNavigation: false,675        /**676         * {DragDropToTextQuestion[]} all the questions on this page, indexed by containerId (id on the .que div).677         */678        questions: {},679        /**680         * Initialise questions.681         *682         * @param {String} containerId id of the outer div for this question.683         * @param {boolean} readOnly whether the question is being displayed read-only.684         */685        init: function(containerId, readOnly) {686            questionManager.questions[containerId] = new DragDropToTextQuestion(containerId, readOnly);687            if (!questionManager.eventHandlersInitialised) {688                questionManager.setupEventHandlers();689                questionManager.eventHandlersInitialised = true;690            }691        },692        /**693         * Set up the event handlers that make this question type work. (Done once per page.)694         */695        setupEventHandlers: function() {696            // We do not use the body event here to prevent the other event on Mobile device, such as scroll event.697            questionManager.addEventHandlersToDrag($('.que.ddwtos:not(.qtype_ddwtos-readonly) span.draghome'));698            $('body')699                .on('keydown',700                    '.que.ddwtos:not(.qtype_ddwtos-readonly) span.drop',701                    questionManager.handleKeyPress)702                .on('keydown',703                    '.que.ddwtos:not(.qtype_ddwtos-readonly) span.draghome.placed:not(.beingdragged)',704                    questionManager.handleKeyPress)705                .on('qtype_ddwtos-dragmoved', questionManager.handleDragMoved);706        },707        /**708         * Binding the drag/touch event again for newly created element.709         *710         * @param {jQuery} element Element to bind the event711         */712        addEventHandlersToDrag: function(element) {713            // Unbind all the mousedown and touchstart events to prevent double binding.714            element.unbind('mousedown touchstart');715            element.on('mousedown touchstart', questionManager.handleDragStart);716        },717        /**718         * Handle mouse down / touch start on drags.719         * @param {Event} e the DOM event.720         */721        handleDragStart: function(e) {722            e.preventDefault();723            var question = questionManager.getQuestionForEvent(e);724            if (question) {725                question.handleDragStart(e);726            }727        },728        /**729         * Handle key down / press on drops.730         * @param {KeyboardEvent} e731         */732        handleKeyPress: function(e) {733            if (questionManager.isKeyboardNavigation) {734                return;735            }736            questionManager.isKeyboardNavigation = true;737            var question = questionManager.getQuestionForEvent(e);738            if (question) {739                question.handleKeyPress(e);740            }741        },742        /**743         * Given an event, work out which question it affects.744         *745         * @param {Event} e the event.746         * @returns {DragDropToTextQuestion|undefined} The question, or undefined.747         */748        getQuestionForEvent: function(e) {749            var containerId = $(e.currentTarget).closest('.que.ddwtos').attr('id');750            return questionManager.questions[containerId];751        },752        /**753         * Handle when drag moved.754         *755         * @param {Event} e the event.756         * @param {jQuery} drag the drag757         * @param {jQuery} target the target758         * @param {DragDropToTextQuestion} thisQ the question.759         */760        handleDragMoved: function(e, drag, target, thisQ) {761            drag.removeClass('beingdragged');762            drag.css('top', '').css('left', '');763            target.after(drag);764            target.removeClass('active');765            if (typeof drag.data('unplaced') !== 'undefined' && drag.data('unplaced') === true) {766                drag.removeClass('placed').addClass('unplaced');767                drag.removeAttr('tabindex');768                drag.removeData('unplaced');769                if (drag.hasClass('infinite') && thisQ.getInfiniteDragClones(drag, true).length > 1) {770                    thisQ.getInfiniteDragClones(drag, true).first().remove();771                }772            }773            if (typeof drag.data('isfocus') !== 'undefined' && drag.data('isfocus') === true) {774                drag.focus();775                drag.removeData('isfocus');776            }777            if (typeof target.data('isfocus') !== 'undefined' && target.data('isfocus') === true) {778                target.removeData('isfocus');779            }780            if (questionManager.isKeyboardNavigation) {781                questionManager.isKeyboardNavigation = false;782            }783        }784    };785    /**786     * @alias module:qtype_ddwtos/ddwtos787     */788    return {789        /**790         * Initialise one drag-drop into text question.791         *792         * @param {String} containerId id of the outer div for this question.793         * @param {boolean} readOnly whether the question is being displayed read-only.794         */795        init: questionManager.init796    };...

dnd.js

Source:dnd.js

1// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-2const Clutter = imports.gi.Clutter;3const GLib = imports.gi.GLib;4const Gtk = imports.gi.Gtk;5const St = imports.gi.St;6const Lang = imports.lang;7const Meta = imports.gi.Meta;8const Shell = imports.gi.Shell;9const Signals = imports.signals;10const Tweener = imports.ui.tweener;11const Main = imports.ui.main;12const Params = imports.misc.params;13// Time to scale down to maxDragActorSize14const SCALE_ANIMATION_TIME = 0.25;15// Time to animate to original position on cancel16const SNAP_BACK_ANIMATION_TIME = 0.25;17// Time to animate to original position on success18const REVERT_ANIMATION_TIME = 0.75;19const DragMotionResult = {20    NO_DROP:   0,21    COPY_DROP: 1,22    MOVE_DROP: 2,23    CONTINUE:  324};25const DRAG_CURSOR_MAP = {26    0: Meta.Cursor.DND_UNSUPPORTED_TARGET,27    1: Meta.Cursor.DND_COPY,28    2: Meta.Cursor.DND_MOVE29};30const DragDropResult = {31    FAILURE:  0,32    SUCCESS:  1,33    CONTINUE: 234};35let eventHandlerActor = null;36let currentDraggable = null;37let dragMonitors = [];38function _getEventHandlerActor() {39    if (!eventHandlerActor) {40        eventHandlerActor = new Clutter.Actor({ width: 0, height: 0 });41        Main.uiGroup.add_actor(eventHandlerActor);42        // We connect to 'event' rather than 'captured-event' because the capturing phase doesn't happen43        // when you've grabbed the pointer.44        eventHandlerActor.connect('event',45                                  function(actor, event) {46                                      return currentDraggable._onEvent(actor, event);47                                  });48    }49    return eventHandlerActor;50}51function addDragMonitor(monitor) {52    dragMonitors.push(monitor);53}54function removeDragMonitor(monitor) {55    for (let i = 0; i < dragMonitors.length; i++)56        if (dragMonitors[i] == monitor) {57            dragMonitors.splice(i, 1);58            return;59        }60}61const _Draggable = new Lang.Class({62    Name: 'Draggable',63    _init : function(actor, params) {64        params = Params.parse(params, { manualMode: false,65                                        restoreOnSuccess: false,66                                        dragActorMaxSize: undefined,67                                        dragActorOpacity: undefined });68        this.actor = actor;69        if (!params.manualMode)70            this.actor.connect('button-press-event',71                               Lang.bind(this, this._onButtonPress));72        this.actor.connect('destroy', Lang.bind(this, function() {73            this._actorDestroyed = true;74            if (this._dragInProgress && this._dragCancellable)75                this._cancelDrag(global.get_current_time());76            this.disconnectAll();77        }));78        this._onEventId = null;79        this._restoreOnSuccess = params.restoreOnSuccess;80        this._dragActorMaxSize = params.dragActorMaxSize;81        this._dragActorOpacity = params.dragActorOpacity;82        this._buttonDown = false; // The mouse button has been pressed and has not yet been released.83        this._dragInProgress = false; // The drag has been started, and has not been dropped or cancelled yet.84        this._animationInProgress = false; // The drag is over and the item is in the process of animating to its original position (snapping back or reverting).85        this._dragCancellable = true;86        this._eventsGrabbed = false;87    },88    _onButtonPress : function (actor, event) {89        if (event.get_button() != 1)90            return Clutter.EVENT_PROPAGATE;91        if (Tweener.getTweenCount(actor))92            return Clutter.EVENT_PROPAGATE;93        this._buttonDown = true;94        this._grabActor();95        let [stageX, stageY] = event.get_coords();96        this._dragStartX = stageX;97        this._dragStartY = stageY;98        return Clutter.EVENT_PROPAGATE;99    },100    _grabActor: function() {101        Clutter.grab_pointer(this.actor);102        this._onEventId = this.actor.connect('event',103                                             Lang.bind(this, this._onEvent));104    },105    _ungrabActor: function() {106        if (!this._onEventId)107            return;108        Clutter.ungrab_pointer();109        this.actor.disconnect(this._onEventId);110        this._onEventId = null;111    },112    _grabEvents: function() {113        if (!this._eventsGrabbed) {114            this._eventsGrabbed = Main.pushModal(_getEventHandlerActor());115            if (this._eventsGrabbed)116                Clutter.grab_pointer(_getEventHandlerActor());117        }118    },119    _ungrabEvents: function() {120        if (this._eventsGrabbed) {121            Clutter.ungrab_pointer();122            Main.popModal(_getEventHandlerActor());123            this._eventsGrabbed = false;124        }125    },126    _onEvent: function(actor, event) {127        // We intercept BUTTON_RELEASE event to know that the button was released in case we128        // didn't start the drag, to drop the draggable in case the drag was in progress, and129        // to complete the drag and ensure that whatever happens to be under the pointer does130        // not get triggered if the drag was cancelled with Esc.131        if (event.type() == Clutter.EventType.BUTTON_RELEASE) {132            this._buttonDown = false;133            if (this._dragInProgress) {134                return this._dragActorDropped(event);135            } else if (this._dragActor != null && !this._animationInProgress) {136                // Drag must have been cancelled with Esc.137                this._dragComplete();138                return Clutter.EVENT_STOP;139            } else {140                // Drag has never started.141                this._ungrabActor();142                return Clutter.EVENT_PROPAGATE;143            }144        // We intercept MOTION event to figure out if the drag has started and to draw145        // this._dragActor under the pointer when dragging is in progress146        } else if (event.type() == Clutter.EventType.MOTION) {147            if (this._dragInProgress) {148                return this._updateDragPosition(event);149            } else if (this._dragActor == null) {150                return this._maybeStartDrag(event);151            }152        // We intercept KEY_PRESS event so that we can process Esc key press to cancel153        // dragging and ignore all other key presses.154        } else if (event.type() == Clutter.EventType.KEY_PRESS && this._dragInProgress) {155            let symbol = event.get_key_symbol();156            if (symbol == Clutter.Escape) {157                this._cancelDrag(event.get_time());158                return Clutter.EVENT_STOP;159            }160        }161        return Clutter.EVENT_PROPAGATE;162    },163    /**164     * fakeRelease:165     *166     * Fake a release event.167     * Must be called if you want to intercept release events on draggable168     * actors for other purposes (for example if you're using169     * PopupMenu.ignoreRelease())170     */171    fakeRelease: function() {172        this._buttonDown = false;173        this._ungrabActor();174    },175    /**176     * startDrag:177     * @stageX: X coordinate of event178     * @stageY: Y coordinate of event179     * @time: Event timestamp180     *181     * Directly initiate a drag and drop operation from the given actor.182     * This function is useful to call if you've specified manualMode183     * for the draggable.184     */185    startDrag: function (stageX, stageY, time) {186        currentDraggable = this;187        this._dragInProgress = true;188        // Special-case St.Button: the pointer grab messes with the internal189        // state, so force a reset to a reasonable state here190        if (this.actor instanceof St.Button) {191            this.actor.fake_release();192            this.actor.hover = false;193        }194        this.emit('drag-begin', time);195        if (this._onEventId)196            this._ungrabActor();197        this._grabEvents();198        global.screen.set_cursor(Meta.Cursor.DND_IN_DRAG);199        this._dragX = this._dragStartX = stageX;200        this._dragY = this._dragStartY = stageY;201        if (this.actor._delegate && this.actor._delegate.getDragActor) {202            this._dragActor = this.actor._delegate.getDragActor();203            Main.uiGroup.add_child(this._dragActor);204            this._dragActor.raise_top();205            Shell.util_set_hidden_from_pick(this._dragActor, true);206            // Drag actor does not always have to be the same as actor. For example drag actor207            // can be an image that's part of the actor. So to perform "snap back" correctly we need208            // to know what was the drag actor source.209            if (this.actor._delegate.getDragActorSource) {210                this._dragActorSource = this.actor._delegate.getDragActorSource();211                // If the user dragged from the source, then position212                // the dragActor over it. Otherwise, center it213                // around the pointer214                let [sourceX, sourceY] = this._dragActorSource.get_transformed_position();215                let x, y;216                if (stageX > sourceX && stageX <= sourceX + this._dragActor.width &&217                    stageY > sourceY && stageY <= sourceY + this._dragActor.height) {218                    x = sourceX;219                    y = sourceY;220                } else {221                    x = stageX - this._dragActor.width / 2;222                    y = stageY - this._dragActor.height / 2;223                }224                this._dragActor.set_position(x, y);225            } else {226                this._dragActorSource = this.actor;227            }228            this._dragOrigParent = undefined;229            this._dragOffsetX = this._dragActor.x - this._dragStartX;230            this._dragOffsetY = this._dragActor.y - this._dragStartY;231        } else {232            this._dragActor = this.actor;233            this._dragActorSource = undefined;234            this._dragOrigParent = this.actor.get_parent();235            this._dragOrigX = this._dragActor.x;236            this._dragOrigY = this._dragActor.y;237            this._dragOrigScale = this._dragActor.scale_x;238            // Set the actor's scale such that it will keep the same239            // transformed size when it's reparented to the uiGroup240            let [scaledWidth, scaledHeight] = this.actor.get_transformed_size();241            this._dragActor.set_scale(scaledWidth / this.actor.width,242                                      scaledHeight / this.actor.height);243            let [actorStageX, actorStageY] = this.actor.get_transformed_position();244            this._dragOffsetX = actorStageX - this._dragStartX;245            this._dragOffsetY = actorStageY - this._dragStartY;246            this._dragOrigParent.remove_actor(this._dragActor);247            Main.uiGroup.add_child(this._dragActor);248            this._dragActor.raise_top();249            Shell.util_set_hidden_from_pick(this._dragActor, true);250        }251        this._dragOrigOpacity = this._dragActor.opacity;252        if (this._dragActorOpacity != undefined)253            this._dragActor.opacity = this._dragActorOpacity;254        this._snapBackX = this._dragStartX + this._dragOffsetX;255        this._snapBackY = this._dragStartY + this._dragOffsetY;256        this._snapBackScale = this._dragActor.scale_x;257        if (this._dragActorMaxSize != undefined) {258            let [scaledWidth, scaledHeight] = this._dragActor.get_transformed_size();259            let currentSize = Math.max(scaledWidth, scaledHeight);260            if (currentSize > this._dragActorMaxSize) {261                let scale = this._dragActorMaxSize / currentSize;262                let origScale =  this._dragActor.scale_x;263                let origDragOffsetX = this._dragOffsetX;264                let origDragOffsetY = this._dragOffsetY;265                // The position of the actor changes as we scale266                // around the drag position, but we can't just tween267                // to the final position because that tween would268                // fight with updates as the user continues dragging269                // the mouse; instead we do the position computations in270                // an onUpdate() function.271                Tweener.addTween(this._dragActor,272                                 { scale_x: scale * origScale,273                                   scale_y: scale * origScale,274                                   time: SCALE_ANIMATION_TIME,275                                   transition: 'easeOutQuad',276                                   onUpdate: function() {277                                       let currentScale = this._dragActor.scale_x / origScale;278                                       this._dragOffsetX = currentScale * origDragOffsetX;279                                       this._dragOffsetY = currentScale * origDragOffsetY;280                                       this._dragActor.set_position(this._dragX + this._dragOffsetX,281                                                                    this._dragY + this._dragOffsetY);282                                   },283                                   onUpdateScope: this });284            }285        }286    },287    _maybeStartDrag:  function(event) {288        let [stageX, stageY] = event.get_coords();289        // See if the user has moved the mouse enough to trigger a drag290        let threshold = Gtk.Settings.get_default().gtk_dnd_drag_threshold;291        if ((Math.abs(stageX - this._dragStartX) > threshold ||292             Math.abs(stageY - this._dragStartY) > threshold)) {293                this.startDrag(stageX, stageY, event.get_time());294                this._updateDragPosition(event);295        }296        return true;297    },298    _updateDragHover : function () {299        this._updateHoverId = 0;300        let target = this._dragActor.get_stage().get_actor_at_pos(Clutter.PickMode.ALL,301                                                                  this._dragX, this._dragY);302        let dragEvent = {303            x: this._dragX,304            y: this._dragY,305            dragActor: this._dragActor,306            source: this.actor._delegate,307            targetActor: target308        };309        for (let i = 0; i < dragMonitors.length; i++) {310            let motionFunc = dragMonitors[i].dragMotion;311            if (motionFunc) {312                let result = motionFunc(dragEvent);313                if (result != DragMotionResult.CONTINUE) {314                    global.screen.set_cursor(DRAG_CURSOR_MAP[result]);315                    return GLib.SOURCE_REMOVE;316                }317            }318        }319        while (target) {320            if (target._delegate && target._delegate.handleDragOver) {321                let [r, targX, targY] = target.transform_stage_point(this._dragX, this._dragY);322                // We currently loop through all parents on drag-over even if one of the children has handled it.323                // We can check the return value of the function and break the loop if it's true if we don't want324                // to continue checking the parents.325                let result = target._delegate.handleDragOver(this.actor._delegate,326                                                             this._dragActor,327                                                             targX,328                                                             targY,329                                                             0);330                if (result != DragMotionResult.CONTINUE) {331                    global.screen.set_cursor(DRAG_CURSOR_MAP[result]);332                    return GLib.SOURCE_REMOVE;333                }334            }335            target = target.get_parent();336        }337        global.screen.set_cursor(Meta.Cursor.DND_IN_DRAG);338        return GLib.SOURCE_REMOVE;339    },340    _queueUpdateDragHover: function() {341        if (this._updateHoverId)342            return;343        this._updateHoverId = GLib.idle_add(GLib.PRIORITY_DEFAULT,344                                            Lang.bind(this, this._updateDragHover));345        GLib.Source.set_name_by_id(this._updateHoverId, '[gnome-shell] this._updateDragHover');346    },347    _updateDragPosition : function (event) {348        let [stageX, stageY] = event.get_coords();349        this._dragX = stageX;350        this._dragY = stageY;351        this._dragActor.set_position(stageX + this._dragOffsetX,352                                     stageY + this._dragOffsetY);353        this._queueUpdateDragHover();354        return true;355    },356    _dragActorDropped: function(event) {357        let [dropX, dropY] = event.get_coords();358        let target = this._dragActor.get_stage().get_actor_at_pos(Clutter.PickMode.ALL,359                                                                  dropX, dropY);360        // We call observers only once per motion with the innermost361        // target actor. If necessary, the observer can walk the362        // parent itself.363        let dropEvent = {364            dropActor: this._dragActor,365            targetActor: target,366            clutterEvent: event367        };368        for (let i = 0; i < dragMonitors.length; i++) {369            let dropFunc = dragMonitors[i].dragDrop;370            if (dropFunc)371                switch (dropFunc(dropEvent)) {372                    case DragDropResult.FAILURE:373                    case DragDropResult.SUCCESS:374                        return true;375                    case DragDropResult.CONTINUE:376                        continue;377                }378        }379        // At this point it is too late to cancel a drag by destroying380        // the actor, the fate of which is decided by acceptDrop and its381        // side-effects382        this._dragCancellable = false;383        while (target) {384            if (target._delegate && target._delegate.acceptDrop) {385                let [r, targX, targY] = target.transform_stage_point(dropX, dropY);386                if (target._delegate.acceptDrop(this.actor._delegate,387                                                this._dragActor,388                                                targX,389                                                targY,390                                                event.get_time())) {391                    // If it accepted the drop without taking the actor,392                    // handle it ourselves.393                    if (this._dragActor.get_parent() == Main.uiGroup) {394                        if (this._restoreOnSuccess) {395                            this._restoreDragActor(event.get_time());396                            return true;397                        } else398                            this._dragActor.destroy();399                    }400                    this._dragInProgress = false;401                    global.screen.set_cursor(Meta.Cursor.DEFAULT);402                    this.emit('drag-end', event.get_time(), true);403                    this._dragComplete();404                    return true;405                }406            }407            target = target.get_parent();408        }409        this._cancelDrag(event.get_time());410        return true;411    },412    _getRestoreLocation: function() {413        let x, y, scale;414        if (this._dragActorSource && this._dragActorSource.visible) {415            // Snap the clone back to its source416            [x, y] = this._dragActorSource.get_transformed_position();417            let [sourceScaledWidth, sourceScaledHeight] = this._dragActorSource.get_transformed_size();418            scale = this._dragActor.width / sourceScaledWidth;419        } else if (this._dragOrigParent) {420            // Snap the actor back to its original position within421            // its parent, adjusting for the fact that the parent422            // may have been moved or scaled423            let [parentX, parentY] = this._dragOrigParent.get_transformed_position();424            let [parentWidth, parentHeight] = this._dragOrigParent.get_size();425            let [parentScaledWidth, parentScaledHeight] = this._dragOrigParent.get_transformed_size();426            let parentScale = 1.0;427            if (parentWidth != 0)428                parentScale = parentScaledWidth / parentWidth;429            x = parentX + parentScale * this._dragOrigX;430            y = parentY + parentScale * this._dragOrigY;431            scale = this._dragOrigScale * parentScale;432        } else {433            // Snap back actor to its original stage position434            x = this._snapBackX;435            y = this._snapBackY;436            scale = this._snapBackScale;437        }438        return [x, y, scale];439    },440    _cancelDrag: function(eventTime) {441        this.emit('drag-cancelled', eventTime);442        this._dragInProgress = false;443        let [snapBackX, snapBackY, snapBackScale] = this._getRestoreLocation();444        if (this._actorDestroyed) {445            global.screen.set_cursor(Meta.Cursor.DEFAULT);446            if (!this._buttonDown)447                this._dragComplete();448            this.emit('drag-end', eventTime, false);449            if (!this._dragOrigParent)450                this._dragActor.destroy();451            return;452        }453        this._animationInProgress = true;454        // No target, so snap back455        Tweener.addTween(this._dragActor,456                         { x: snapBackX,457                           y: snapBackY,458                           scale_x: snapBackScale,459                           scale_y: snapBackScale,460                           opacity: this._dragOrigOpacity,461                           time: SNAP_BACK_ANIMATION_TIME,462                           transition: 'easeOutQuad',463                           onComplete: this._onAnimationComplete,464                           onCompleteScope: this,465                           onCompleteParams: [this._dragActor, eventTime]466                         });467    },468    _restoreDragActor: function(eventTime) {469        this._dragInProgress = false;470        [restoreX, restoreY, restoreScale] = this._getRestoreLocation();471        // fade the actor back in at its original location472        this._dragActor.set_position(restoreX, restoreY);473        this._dragActor.set_scale(restoreScale, restoreScale);474        this._dragActor.opacity = 0;475        this._animationInProgress = true;476        Tweener.addTween(this._dragActor,477                         { opacity: this._dragOrigOpacity,478                           time: REVERT_ANIMATION_TIME,479                           transition: 'easeOutQuad',480                           onComplete: this._onAnimationComplete,481                           onCompleteScope: this,482                           onCompleteParams: [this._dragActor, eventTime]483                         });484    },485    _onAnimationComplete : function (dragActor, eventTime) {486        if (this._dragOrigParent) {487            Main.uiGroup.remove_child(this._dragActor);488            this._dragOrigParent.add_actor(this._dragActor);489            dragActor.set_scale(this._dragOrigScale, this._dragOrigScale);490            dragActor.set_position(this._dragOrigX, this._dragOrigY);491        } else {492            dragActor.destroy();493        }494        global.screen.set_cursor(Meta.Cursor.DEFAULT);495        this.emit('drag-end', eventTime, false);496        this._animationInProgress = false;497        if (!this._buttonDown)498            this._dragComplete();499    },500    _dragComplete: function() {501        if (!this._actorDestroyed)502            Shell.util_set_hidden_from_pick(this._dragActor, false);503        this._ungrabEvents();504        global.sync_pointer();505        if (this._updateHoverId) {506            GLib.source_remove(this._updateHoverId);507            this._updateHoverId = 0;508        }509        this._dragActor = undefined;510        currentDraggable = null;511    }512});513Signals.addSignalMethods(_Draggable.prototype);514/**515 * makeDraggable:516 * @actor: Source actor517 * @params: (optional) Additional parameters518 *519 * Create an object which controls drag and drop for the given actor.520 *521 * If %manualMode is %true in @params, do not automatically start522 * drag and drop on click523 *524 * If %dragActorMaxSize is present in @params, the drag actor will525 * be scaled down to be no larger than that size in pixels.526 *527 * If %dragActorOpacity is present in @params, the drag actor will528 * will be set to have that opacity during the drag.529 *530 * Note that when the drag actor is the source actor and the drop531 * succeeds, the actor scale and opacity aren't reset; if the drop532 * target wants to reuse the actor, it's up to the drop target to533 * reset these values.534 */535function makeDraggable(actor, params) {536    return new _Draggable(actor, params);...

abstractdragdrop.js

Source:abstractdragdrop.js

1goog.provide('goog.fx.AbstractDragDrop'); 2goog.provide('goog.fx.AbstractDragDrop.EventType'); 3goog.provide('goog.fx.DragDropEvent'); 4goog.provide('goog.fx.DragDropItem'); 5goog.require('goog.dom'); 6goog.require('goog.dom.classes'); 7goog.require('goog.events'); 8goog.require('goog.events.Event'); 9goog.require('goog.events.EventTarget'); 10goog.require('goog.events.EventType'); 11goog.require('goog.fx.Dragger'); 12goog.require('goog.fx.Dragger.EventType'); 13goog.require('goog.math.Box'); 14goog.require('goog.math.Coordinate'); 15goog.require('goog.style'); 16goog.fx.AbstractDragDrop = function() { 17  this.items_ =[]; 18  this.targets_ =[]; 19  this.scrollableContainers_ =[]; 20}; 21goog.inherits(goog.fx.AbstractDragDrop, goog.events.EventTarget); 22goog.fx.AbstractDragDrop.DUMMY_TARGET_MIN_SIZE_ = 10; 23goog.fx.AbstractDragDrop.prototype.isSource_ = false; 24goog.fx.AbstractDragDrop.prototype.isTarget_ = false; 25goog.fx.AbstractDragDrop.prototype.subtargetFunction_; 26goog.fx.AbstractDragDrop.prototype.activeSubtarget_; 27goog.fx.AbstractDragDrop.prototype.dragClass_; 28goog.fx.AbstractDragDrop.prototype.sourceClass_; 29goog.fx.AbstractDragDrop.prototype.targetClass_; 30goog.fx.AbstractDragDrop.prototype.scrollTarget_; 31goog.fx.AbstractDragDrop.prototype.dummyTarget_; 32goog.fx.AbstractDragDrop.prototype.initialized_ = false; 33goog.fx.AbstractDragDrop.EventType = { 34  DRAGOVER: 'dragover', 35  DRAGOUT: 'dragout', 36  DRAG: 'drag', 37  DROP: 'drop', 38  DRAGSTART: 'dragstart', 39  DRAGEND: 'dragend' 40}; 41goog.fx.AbstractDragDrop.initDragDistanceThreshold = 5; 42goog.fx.AbstractDragDrop.prototype.setDragClass = function(className) { 43  this.dragClass_ = className; 44}; 45goog.fx.AbstractDragDrop.prototype.setSourceClass = function(className) { 46  this.sourceClass_ = className; 47}; 48goog.fx.AbstractDragDrop.prototype.setTargetClass = function(className) { 49  this.targetClass_ = className; 50}; 51goog.fx.AbstractDragDrop.prototype.isInitialized = function() { 52  return this.initialized_; 53}; 54goog.fx.AbstractDragDrop.prototype.addItem = function(item) { 55  throw Error('Call to pure virtual method'); 56}; 57goog.fx.AbstractDragDrop.prototype.addTarget = function(target) { 58  this.targets_.push(target); 59  target.isTarget_ = true; 60  this.isSource_ = true; 61}; 62goog.fx.AbstractDragDrop.prototype.setScrollTarget = function(scrollTarget) { 63  this.scrollTarget_ = scrollTarget; 64}; 65goog.fx.AbstractDragDrop.prototype.init = function() { 66  if(this.initialized_) { 67    return; 68  } 69  for(var item, i = 0; item = this.items_[i]; i ++) { 70    this.initItem(item); 71  } 72  this.initialized_ = true; 73}; 74goog.fx.AbstractDragDrop.prototype.initItem = function(item) { 75  if(this.isSource_) { 76    goog.events.listen(item.element, goog.events.EventType.MOUSEDOWN, item.mouseDown_, false, item); 77    if(this.sourceClass_) { 78      goog.dom.classes.add(item.element, this.sourceClass_); 79    } 80  } 81  if(this.isTarget_ && this.targetClass_) { 82    goog.dom.classes.add(item.element, this.targetClass_); 83  } 84}; 85goog.fx.AbstractDragDrop.prototype.disposeItem = function(item) { 86  if(this.isSource_) { 87    goog.events.unlisten(item.element, goog.events.EventType.MOUSEDOWN, item.mouseDown_, false, item); 88    if(this.sourceClass_) { 89      goog.dom.classes.remove(item.element, this.sourceClass_); 90    } 91  } 92  if(this.isTarget_ && this.targetClass_) { 93    goog.dom.classes.remove(item.element, this.targetClass_); 94  } 95}; 96goog.fx.AbstractDragDrop.prototype.removeItems = function() { 97  for(var item, i = 0; item = this.items_[i]; i ++) { 98    this.disposeItem(item); 99  } 100  this.items_.length = 0; 101}; 102goog.fx.AbstractDragDrop.prototype.maybeStartDrag = function(event, item) { 103  item.maybeStartDrag_(event, item.element); 104}; 105goog.fx.AbstractDragDrop.prototype.startDrag = function(event, item) { 106  if(this.dragItem_) { 107    return; 108  } 109  this.dragItem_ = item; 110  var dragStartEvent = new goog.fx.DragDropEvent(goog.fx.AbstractDragDrop.EventType.DRAGSTART, this, this.dragItem_); 111  if(this.dispatchEvent(dragStartEvent) == false) { 112    dragStartEvent.dispose(); 113    this.dragItem_ = null; 114    return; 115  } 116  dragStartEvent.dispose(); 117  var el = item.getCurrentDragElement(); 118  this.dragEl_ = this.createDragElement(el); 119  var doc = goog.dom.getOwnerDocument(el); 120  doc.body.appendChild(this.dragEl_); 121  this.dragger_ = this.createDraggerFor(el, this.dragEl_, event); 122  this.dragger_.setScrollTarget(this.scrollTarget_); 123  goog.events.listen(this.dragger_, goog.fx.Dragger.EventType.DRAG, this.moveDrag_, false, this); 124  goog.events.listen(this.dragger_, goog.fx.Dragger.EventType.END, this.endDrag, false, this); 125  goog.events.listen(doc.body, goog.events.EventType.SELECTSTART, this.suppressSelect_); 126  this.recalculateDragTargets(); 127  this.activeTarget_ = null; 128  this.initScrollableContainers_(); 129  this.dragger_.startDrag(event); 130  event.preventDefault(); 131}; 132goog.fx.AbstractDragDrop.prototype.recalculateDragTargets = function() { 133  this.targetList_ =[]; 134  for(var target, i = 0; target = this.targets_[i]; i ++) { 135    for(var itm, j = 0; itm = target.items_[j]; j ++) { 136      this.addDragTarget_(target, itm); 137    } 138  } 139  if(! this.targetBox_) { 140    this.targetBox_ = new goog.math.Box(0, 0, 0, 0); 141  } 142}; 143goog.fx.AbstractDragDrop.prototype.createDraggerFor = function(sourceEl, el, event) { 144  var pos = this.getDragElementPosition(sourceEl, el, event); 145  el.style.position = 'absolute'; 146  el.style.left = pos.x + 'px'; 147  el.style.top = pos.y + 'px'; 148  return new goog.fx.Dragger(el); 149}; 150goog.fx.AbstractDragDrop.prototype.endDrag = function(event) { 151  var activeTarget = event.dragCanceled ? null: this.activeTarget_; 152  if(activeTarget && activeTarget.target_) { 153    var clientX = event.clientX; 154    var clientY = event.clientY; 155    var scroll = this.getScrollPos(); 156    var x = clientX + scroll.x; 157    var y = clientY + scroll.y; 158    var subtarget; 159    if(this.subtargetFunction_) { 160      subtarget = this.subtargetFunction_(activeTarget.item_, activeTarget.box_, x, y); 161    } 162    var dragEvent = new goog.fx.DragDropEvent(goog.fx.AbstractDragDrop.EventType.DRAG, this, this.dragItem_, activeTarget.target_, activeTarget.item_, activeTarget.element_, clientX, clientY, x, y); 163    this.dispatchEvent(dragEvent); 164    dragEvent.dispose(); 165    var dropEvent = new goog.fx.DragDropEvent(goog.fx.AbstractDragDrop.EventType.DROP, this, this.dragItem_, activeTarget.target_, activeTarget.item_, activeTarget.element_, clientX, clientY, x, y, subtarget); 166    activeTarget.target_.dispatchEvent(dropEvent); 167    dropEvent.dispose(); 168  } 169  var dragEndEvent = new goog.fx.DragDropEvent(goog.fx.AbstractDragDrop.EventType.DRAGEND, this, this.dragItem_); 170  this.dispatchEvent(dragEndEvent); 171  dragEndEvent.dispose(); 172  goog.events.unlisten(this.dragger_, goog.fx.Dragger.EventType.DRAG, this.moveDrag_, false, this); 173  goog.events.unlisten(this.dragger_, goog.fx.Dragger.EventType.END, this.endDrag, false, this); 174  var doc = goog.dom.getOwnerDocument(this.dragItem_.getCurrentDragElement()); 175  goog.events.unlisten(doc.body, goog.events.EventType.SELECTSTART, this.suppressSelect_); 176  this.afterEndDrag(this.activeTarget_ ? this.activeTarget_.item_: null); 177}; 178goog.fx.AbstractDragDrop.prototype.afterEndDrag = function(opt_dropTarget) { 179  this.disposeDrag(); 180}; 181goog.fx.AbstractDragDrop.prototype.disposeDrag = function() { 182  this.disposeScrollableContainerListeners_(); 183  this.dragger_.dispose(); 184  goog.dom.removeNode(this.dragEl_); 185  delete this.dragItem_; 186  delete this.dragEl_; 187  delete this.dragger_; 188  delete this.targetList_; 189  delete this.activeTarget_; 190}; 191goog.fx.AbstractDragDrop.prototype.moveDrag_ = function(event) { 192  var x = event.clientX; 193  var y = event.clientY; 194  var scroll = this.getScrollPos(); 195  x += scroll.x; 196  y += scroll.y; 197  var activeTarget = this.activeTarget_; 198  var subtarget; 199  if(activeTarget) { 200    if(this.subtargetFunction_ && activeTarget.target_) { 201      subtarget = this.subtargetFunction_(activeTarget.item_, activeTarget.box_, x, y); 202    } 203    if(this.isInside_(x, y, activeTarget.box_) && subtarget == this.activeSubtarget_) { 204      return; 205    } 206    if(activeTarget.target_) { 207      var sourceDragOutEvent = new goog.fx.DragDropEvent(goog.fx.AbstractDragDrop.EventType.DRAGOUT, this, this.dragItem_, activeTarget.target_, activeTarget.item_, activeTarget.element_); 208      this.dispatchEvent(sourceDragOutEvent); 209      sourceDragOutEvent.dispose(); 210      var targetDragOutEvent = new goog.fx.DragDropEvent(goog.fx.AbstractDragDrop.EventType.DRAGOUT, this, this.dragItem_, activeTarget.target_, activeTarget.item_, activeTarget.element_, undefined, undefined, undefined, undefined, this.activeSubtarget_); 211      activeTarget.target_.dispatchEvent(targetDragOutEvent); 212      targetDragOutEvent.dispose(); 213    } 214    this.activeSubtarget_ = subtarget; 215    this.activeTarget_ = null; 216  } 217  if(this.isInside_(x, y, this.targetBox_)) { 218    activeTarget = this.activeTarget_ = this.getTargetFromPosition_(x, y); 219    if(activeTarget && activeTarget.target_) { 220      if(this.subtargetFunction_) { 221        subtarget = this.subtargetFunction_(activeTarget.item_, activeTarget.box_, x, y); 222      } 223      var sourceDragOverEvent = new goog.fx.DragDropEvent(goog.fx.AbstractDragDrop.EventType.DRAGOVER, this, this.dragItem_, activeTarget.target_, activeTarget.item_, activeTarget.element_); 224      sourceDragOverEvent.subtarget = subtarget; 225      this.dispatchEvent(sourceDragOverEvent); 226      sourceDragOverEvent.dispose(); 227      var targetDragOverEvent = new goog.fx.DragDropEvent(goog.fx.AbstractDragDrop.EventType.DRAGOVER, this, this.dragItem_, activeTarget.target_, activeTarget.item_, activeTarget.element_, event.clientX, event.clientY, undefined, undefined, subtarget); 228      activeTarget.target_.dispatchEvent(targetDragOverEvent); 229      targetDragOverEvent.dispose(); 230    } else if(! activeTarget) { 231      this.activeTarget_ = this.maybeCreateDummyTargetForPosition_(x, y); 232    } 233  } 234}; 235goog.fx.AbstractDragDrop.prototype.suppressSelect_ = function(event) { 236  return false; 237}; 238goog.fx.AbstractDragDrop.prototype.initScrollableContainers_ = function() { 239  var container, i, j, target; 240  for(i = 0; container = this.scrollableContainers_[i]; i ++) { 241    goog.events.listen(container.element_, goog.events.EventType.SCROLL, this.containerScrollHandler_, false, this); 242    container.containedTargets_ =[]; 243    container.savedScrollLeft_ = container.element_.scrollLeft; 244    container.savedScrollTop_ = container.element_.scrollTop; 245    var pos = goog.style.getPageOffset(container.element_); 246    var size = goog.style.getSize(container.element_); 247    container.box_ = new goog.math.Box(pos.y, pos.x + size.width, pos.y + size.height, pos.x); 248  } 249  for(i = 0; target = this.targetList_[i]; i ++) { 250    for(j = 0; container = this.scrollableContainers_[j]; j ++) { 251      if(goog.dom.contains(container.element_, target.element_)) { 252        container.containedTargets_.push(target); 253        target.scrollableContainer_ = container; 254      } 255    } 256  } 257}; 258goog.fx.AbstractDragDrop.prototype.disposeScrollableContainerListeners_ = function() { 259  for(var i = 0, container; container = this.scrollableContainers_[i]; i ++) { 260    goog.events.unlisten(container.element_, 'scroll', this.containerScrollHandler_, false, this); 261    container.containedTargets_ =[]; 262  } 263}; 264goog.fx.AbstractDragDrop.prototype.addScrollableContainer = function(element) { 265  this.scrollableContainers_.push(new goog.fx.ScrollableContainer_(element)); 266}; 267goog.fx.AbstractDragDrop.prototype.containerScrollHandler_ = function(e) { 268  for(var i = 0, container; container = this.scrollableContainers_[i]; i ++) { 269    if(e.target == container.element_) { 270      var deltaTop = container.savedScrollTop_ - container.element_.scrollTop; 271      var deltaLeft = container.savedScrollLeft_ - container.element_.scrollLeft; 272      container.savedScrollTop_ = container.element_.scrollTop; 273      container.savedScrollLeft_ = container.element_.scrollLeft; 274      for(var j = 0, target; target = container.containedTargets_[j]; j ++) { 275        var box = target.box_; 276        box.top += deltaTop; 277        box.left += deltaLeft; 278        box.bottom += deltaTop; 279        box.right += deltaLeft; 280        this.calculateTargetBox_(box); 281      } 282    } 283  } 284}; 285goog.fx.AbstractDragDrop.prototype.setSubtargetFunction = function(f) { 286  this.subtargetFunction_ = f; 287}; 288goog.fx.AbstractDragDrop.prototype.createDragElement = function(sourceEl) { 289  var dragEl = this.cloneNode_(sourceEl); 290  if(this.dragClass_) { 291    goog.dom.classes.add(dragEl, this.dragClass_); 292  } 293  return dragEl; 294}; 295goog.fx.AbstractDragDrop.prototype.getDragElementPosition = function(el, dragEl, event) { 296  var pos = goog.style.getPageOffset(el); 297  var marginBox = goog.style.getMarginBox(el); 298  pos.x +=(marginBox.left || 0) * 2; 299  pos.y +=(marginBox.top || 0) * 2; 300  return pos; 301}; 302goog.fx.AbstractDragDrop.prototype.getDragger = function() { 303  return this.dragger_; 304}; 305goog.fx.AbstractDragDrop.prototype.cloneNode_ = function(sourceEl) { 306  var clonedEl =(sourceEl.cloneNode(true)); 307  switch(sourceEl.tagName.toLowerCase()) { 308    case 'tr': 309      return goog.dom.createDom('table', null, goog.dom.createDom('tbody', null, clonedEl)); 310    case 'td': 311    case 'th': 312      return goog.dom.createDom('table', null, goog.dom.createDom('tbody', null, goog.dom.createDom('tr', null, clonedEl))); 313    default: 314      return clonedEl; 315  } 316}; 317goog.fx.AbstractDragDrop.prototype.addDragTarget_ = function(target, item) { 318  var draggableElements = item.getDraggableElements(); 319  var targetList = this.targetList_; 320  for(var i = 0; i < draggableElements.length; i ++) { 321    var draggableElement = draggableElements[i]; 322    var pos = goog.style.getPageOffset(draggableElement); 323    var size = goog.style.getSize(draggableElement); 324    var box = new goog.math.Box(pos.y, pos.x + size.width, pos.y + size.height, pos.x); 325    targetList.push(new goog.fx.ActiveDropTarget_(box, target, item, draggableElement)); 326    this.calculateTargetBox_(box); 327  } 328}; 329goog.fx.AbstractDragDrop.prototype.calculateTargetBox_ = function(box) { 330  if(this.targetList_.length == 1) { 331    this.targetBox_ = new goog.math.Box(box.top, box.right, box.bottom, box.left); 332  } else { 333    var tb = this.targetBox_; 334    tb.left = Math.min(box.left, tb.left); 335    tb.right = Math.max(box.right, tb.right); 336    tb.top = Math.min(box.top, tb.top); 337    tb.bottom = Math.max(box.bottom, tb.bottom); 338  } 339}; 340goog.fx.AbstractDragDrop.prototype.maybeCreateDummyTargetForPosition_ = function(x, y) { 341  if(! this.dummyTarget_) { 342    this.dummyTarget_ = new goog.fx.ActiveDropTarget_(this.targetBox_.clone()); 343  } 344  var fakeTargetBox = this.dummyTarget_.box_; 345  fakeTargetBox.top = this.targetBox_.top; 346  fakeTargetBox.right = this.targetBox_.right; 347  fakeTargetBox.bottom = this.targetBox_.bottom; 348  fakeTargetBox.left = this.targetBox_.left; 349  for(var i = 0, target; target = this.targetList_[i]; i ++) { 350    var box = target.box_; 351    var horizontalClip = - 1; 352    if(x >= box.right) { 353      horizontalClip = box.right > fakeTargetBox.left ? box.right: fakeTargetBox.left; 354    } else if(x < box.left) { 355      horizontalClip = box.left < fakeTargetBox.right ? box.left: fakeTargetBox.right; 356    } 357    var verticalClip = - 1; 358    if(y >= box.bottom) { 359      verticalClip = box.bottom > fakeTargetBox.top ? box.bottom: fakeTargetBox.top; 360    } else if(y < box.top) { 361      verticalClip = box.top < fakeTargetBox.bottom ? box.top: fakeTargetBox.bottom; 362    } 363    if(horizontalClip >= 0 && verticalClip >= 0) { 364      if(Math.abs(horizontalClip - x) > Math.abs(verticalClip - y)) { 365        verticalClip = - 1; 366      } else { 367        horizontalClip = - 1; 368      } 369    } 370    if(horizontalClip >= 0) { 371      if(horizontalClip <= x) { 372        fakeTargetBox.left = horizontalClip; 373      } else { 374        fakeTargetBox.right = horizontalClip; 375      } 376    } else if(verticalClip >= 0) { 377      if(verticalClip <= y) { 378        fakeTargetBox.top = verticalClip; 379      } else { 380        fakeTargetBox.bottom = verticalClip; 381      } 382    } 383  } 384  return(fakeTargetBox.right - fakeTargetBox.left) *(fakeTargetBox.bottom - fakeTargetBox.top) >= goog.fx.AbstractDragDrop.DUMMY_TARGET_MIN_SIZE_ ? this.dummyTarget_: null; 385}; 386goog.fx.AbstractDragDrop.prototype.getTargetFromPosition_ = function(x, y) { 387  for(var target, i = 0; target = this.targetList_[i]; i ++) { 388    if(this.isInside_(x, y, target.box_)) { 389      if(target.scrollableContainer_) { 390        var box = target.scrollableContainer_.box_; 391        if(this.isInside_(x, y, box)) { 392          return target; 393        } 394      } else { 395        return target; 396      } 397    } 398  } 399  return null; 400}; 401goog.fx.AbstractDragDrop.prototype.isInside_ = function(x, y, box) { 402  return x >= box.left && x < box.right && y >= box.top && y < box.bottom; 403}; 404goog.fx.AbstractDragDrop.prototype.getScrollPos = function() { 405  return goog.dom.getDomHelper(this.dragEl_).getDocumentScroll(); 406}; 407goog.fx.AbstractDragDrop.prototype.disposeInternal = function() { 408  goog.fx.AbstractDragDrop.superClass_.disposeInternal.call(this); 409  this.removeItems(); 410}; 411goog.fx.DragDropEvent = function(type, source, sourceItem, opt_target, opt_targetItem, opt_targetElement, opt_clientX, opt_clientY, opt_x, opt_y, opt_subtarget) { 412  goog.events.Event.call(this, type); 413  this.dragSource = source; 414  this.dragSourceItem = sourceItem; 415  this.dropTarget = opt_target; 416  this.dropTargetItem = opt_targetItem; 417  this.dropTargetElement = opt_targetElement; 418  this.clientX = opt_clientX; 419  this.clientY = opt_clientY; 420  this.viewportX = opt_x; 421  this.viewportY = opt_y; 422  this.subtarget = opt_subtarget; 423}; 424goog.inherits(goog.fx.DragDropEvent, goog.events.Event); 425goog.fx.DragDropEvent.prototype.disposeInternal = function() { 426  goog.fx.DragDropEvent.superClass_.disposeInternal.call(this); 427  delete this.dragSource; 428  delete this.dragSourceItem; 429  delete this.dropTarget; 430  delete this.dropTargetItem; 431  delete this.dropTargetElement; 432}; 433goog.fx.DragDropItem = function(element, opt_data) { 434  this.element = goog.dom.getElement(element); 435  this.data = opt_data; 436  this.parent_ = null; 437  if(! this.element) { 438    throw Error('Invalid argument'); 439  } 440}; 441goog.inherits(goog.fx.DragDropItem, goog.events.EventTarget); 442goog.fx.DragDropItem.prototype.currentDragElement_ = null; 443goog.fx.DragDropItem.prototype.getData = function() { 444  return this.data; 445}; 446goog.fx.DragDropItem.prototype.getDraggableElement = function(target) { 447  return target; 448}; 449goog.fx.DragDropItem.prototype.getCurrentDragElement = function() { 450  return this.currentDragElement_; 451}; 452goog.fx.DragDropItem.prototype.getDraggableElements = function() { 453  return[this.element]; 454}; 455goog.fx.DragDropItem.prototype.mouseDown_ = function(event) { 456  var element = this.getDraggableElement((event.target)); 457  if(element) { 458    this.maybeStartDrag_(event, element); 459  } 460}; 461goog.fx.DragDropItem.prototype.setParent = function(parent) { 462  this.parent_ = parent; 463}; 464goog.fx.DragDropItem.prototype.maybeStartDrag_ = function(event, element) { 465  goog.events.listen(element, goog.events.EventType.MOUSEMOVE, this.mouseMove_, false, this); 466  goog.events.listen(element, goog.events.EventType.MOUSEOUT, this.mouseMove_, false, this); 467  goog.events.listen(element, goog.events.EventType.MOUSEUP, this.mouseUp_, false, this); 468  this.currentDragElement_ = element; 469  this.startPosition_ = new goog.math.Coordinate(event.clientX, event.clientY); 470  event.preventDefault(); 471}; 472goog.fx.DragDropItem.prototype.mouseMove_ = function(event) { 473  var distance = Math.abs(event.clientX - this.startPosition_.x) + Math.abs(event.clientY - this.startPosition_.y); 474  if(distance > goog.fx.AbstractDragDrop.initDragDistanceThreshold) { 475    var currentDragElement = this.currentDragElement_; 476    goog.events.unlisten(currentDragElement, goog.events.EventType.MOUSEMOVE, this.mouseMove_, false, this); 477    goog.events.unlisten(currentDragElement, goog.events.EventType.MOUSEOUT, this.mouseMove_, false, this); 478    goog.events.unlisten(currentDragElement, goog.events.EventType.MOUSEUP, this.mouseUp_, false, this); 479    this.parent_.startDrag(event, this); 480  } 481}; 482goog.fx.DragDropItem.prototype.mouseUp_ = function(event) { 483  var currentDragElement = this.currentDragElement_; 484  goog.events.unlisten(currentDragElement, goog.events.EventType.MOUSEMOVE, this.mouseMove_, false, this); 485  goog.events.unlisten(currentDragElement, goog.events.EventType.MOUSEOUT, this.mouseMove_, false, this); 486  goog.events.unlisten(currentDragElement, goog.events.EventType.MOUSEUP, this.mouseUp_, false, this); 487  delete this.startPosition_; 488  this.currentDragElement_ = null; 489}; 490goog.fx.ActiveDropTarget_ = function(box, opt_target, opt_item, opt_element) { 491  this.box_ = box; 492  this.target_ = opt_target; 493  this.item_ = opt_item; 494  this.element_ = opt_element; 495}; 496goog.fx.ActiveDropTarget_.prototype.scrollableContainer_ = null; 497goog.fx.ScrollableContainer_ = function(element) { 498  this.containedTargets_ =[]; 499  this.element_ = element; 500  this.savedScrollLeft_ = 0; 501  this.savedScrollTop_ = 0; 502  this.box_ = null; ...

draglistgroup.js

Source:draglistgroup.js

1goog.provide('goog.fx.DragListDirection'); 2goog.provide('goog.fx.DragListGroup'); 3goog.provide('goog.fx.DragListGroup.EventType'); 4goog.provide('goog.fx.DragListGroupEvent'); 5goog.require('goog.asserts'); 6goog.require('goog.dom'); 7goog.require('goog.dom.NodeType'); 8goog.require('goog.dom.classes'); 9goog.require('goog.events.Event'); 10goog.require('goog.events.EventHandler'); 11goog.require('goog.events.EventTarget'); 12goog.require('goog.events.EventType'); 13goog.require('goog.fx.Dragger'); 14goog.require('goog.fx.Dragger.EventType'); 15goog.require('goog.math.Coordinate'); 16goog.require('goog.style'); 17goog.fx.DragListGroup = function() { 18  goog.events.EventTarget.call(this); 19  this.dragLists_ =[]; 20  this.dragItems_ =[]; 21  this.dragItemForHandle_ = { }; 22  this.eventHandler_ = new goog.events.EventHandler(this); 23  this.isInitialized_ = false; 24  this.isCurrDragItemAlwaysDisplayed_ = false; 25  this.updateWhileDragging_ = true; 26}; 27goog.inherits(goog.fx.DragListGroup, goog.events.EventTarget); 28goog.fx.DragListDirection = { 29  DOWN: 0, 30  RIGHT: 2, 31  LEFT: 3, 32  RIGHT_2D: 4, 33  LEFT_2D: 5 34}; 35goog.fx.DragListGroup.EventType = { 36  BEFOREDRAGSTART: 'beforedragstart', 37  DRAGSTART: 'dragstart', 38  BEFOREDRAGMOVE: 'beforedragmove', 39  DRAGMOVE: 'dragmove', 40  BEFOREDRAGEND: 'beforedragend', 41  DRAGEND: 'dragend' 42}; 43goog.fx.DragListGroup.prototype.dragItemHoverClasses_; 44goog.fx.DragListGroup.prototype.dragItemHandleHoverClasses_; 45goog.fx.DragListGroup.prototype.currDragItemClasses_; 46goog.fx.DragListGroup.prototype.draggerElClass_; 47goog.fx.DragListGroup.prototype.currDragItem_; 48goog.fx.DragListGroup.prototype.currHoverList_; 49goog.fx.DragListGroup.prototype.origList_; 50goog.fx.DragListGroup.prototype.origNextItem_; 51goog.fx.DragListGroup.prototype.currHoverItem_; 52goog.fx.DragListGroup.prototype.draggerEl_; 53goog.fx.DragListGroup.prototype.dragger_; 54goog.fx.DragListGroup.prototype.setIsCurrDragItemAlwaysDisplayed = function() { 55  this.isCurrDragItemAlwaysDisplayed_ = true; 56}; 57goog.fx.DragListGroup.prototype.setNoUpdateWhileDragging = function() { 58  this.updateWhileDragging_ = false; 59}; 60goog.fx.DragListGroup.prototype.addDragList = function(dragListElement, growthDirection, opt_unused, opt_dragHoverClass) { 61  goog.asserts.assert(! this.isInitialized_); 62  dragListElement.dlgGrowthDirection_ = growthDirection; 63  dragListElement.dlgDragHoverClass_ = opt_dragHoverClass; 64  this.dragLists_.push(dragListElement); 65}; 66goog.fx.DragListGroup.prototype.setFunctionToGetHandleForDragItem = function(getHandleForDragItemFn) { 67  goog.asserts.assert(! this.isInitialized_); 68  this.getHandleForDragItem_ = getHandleForDragItemFn; 69}; 70goog.fx.DragListGroup.prototype.setDragItemHoverClass = function(var_args) { 71  goog.asserts.assert(! this.isInitialized_); 72  this.dragItemHoverClasses_ = goog.array.slice(arguments, 0); 73}; 74goog.fx.DragListGroup.prototype.setDragItemHandleHoverClass = function(var_args) { 75  goog.asserts.assert(! this.isInitialized_); 76  this.dragItemHandleHoverClasses_ = goog.array.slice(arguments, 0); 77}; 78goog.fx.DragListGroup.prototype.setCurrDragItemClass = function(var_args) { 79  goog.asserts.assert(! this.isInitialized_); 80  this.currDragItemClasses_ = goog.array.slice(arguments, 0); 81}; 82goog.fx.DragListGroup.prototype.setDraggerElClass = function(draggerElClass) { 83  goog.asserts.assert(! this.isInitialized_); 84  this.draggerElClass_ = draggerElClass; 85}; 86goog.fx.DragListGroup.prototype.init = function() { 87  if(this.isInitialized_) { 88    return; 89  } 90  for(var i = 0, numLists = this.dragLists_.length; i < numLists; i ++) { 91    var dragList = this.dragLists_[i]; 92    var dragItems = goog.dom.getChildren(dragList); 93    for(var j = 0, numItems = dragItems.length; j < numItems; ++ j) { 94      var dragItem = dragItems[j]; 95      var dragItemHandle = this.getHandleForDragItem_(dragItem); 96      var uid = goog.getUid(dragItemHandle); 97      this.dragItemForHandle_[uid]= dragItem; 98      if(this.dragItemHoverClasses_) { 99        this.eventHandler_.listen(dragItem, goog.events.EventType.MOUSEOVER, this.handleDragItemMouseover_); 100        this.eventHandler_.listen(dragItem, goog.events.EventType.MOUSEOUT, this.handleDragItemMouseout_); 101      } 102      if(this.dragItemHandleHoverClasses_) { 103        this.eventHandler_.listen(dragItemHandle, goog.events.EventType.MOUSEOVER, this.handleDragItemHandleMouseover_); 104        this.eventHandler_.listen(dragItemHandle, goog.events.EventType.MOUSEOUT, this.handleDragItemHandleMouseout_); 105      } 106      this.dragItems_.push(dragItem); 107      this.eventHandler_.listen(dragItemHandle, goog.events.EventType.MOUSEDOWN, this.handleDragStart_); 108    } 109  } 110  this.isInitialized_ = true; 111}; 112goog.fx.DragListGroup.prototype.disposeInternal = function() { 113  this.eventHandler_.dispose(); 114  for(var i = 0, n = this.dragLists_.length; i < n; i ++) { 115    var dragList = this.dragLists_[i]; 116    dragList.dlgGrowthDirection_ = undefined; 117    dragList.dlgDragHoverClass_ = undefined; 118  } 119  this.dragLists_.length = 0; 120  this.dragItems_.length = 0; 121  this.dragItemForHandle_ = null; 122  this.cleanupDragDom_(); 123  goog.fx.DragListGroup.superClass_.disposeInternal.call(this); 124}; 125goog.fx.DragListGroup.prototype.recacheListAndItemBounds_ = function(currDragItem) { 126  for(var i = 0, n = this.dragLists_.length; i < n; i ++) { 127    var dragList = this.dragLists_[i]; 128    dragList.dlgBounds_ = goog.style.getBounds(dragList); 129  } 130  for(var i = 0, n = this.dragItems_.length; i < n; i ++) { 131    var dragItem = this.dragItems_[i]; 132    if(dragItem != currDragItem) { 133      dragItem.dlgBounds_ = goog.style.getBounds(dragItem); 134    } 135  } 136}; 137goog.fx.DragListGroup.prototype.handleDragStart_ = function(e) { 138  if(! e.isMouseActionButton()) { 139    e.preventDefault(); 140    return; 141  } 142  var uid = goog.getUid((e.currentTarget)); 143  var currDragItem =(this.dragItemForHandle_[uid]); 144  var rv = this.dispatchEvent(new goog.fx.DragListGroupEvent(goog.fx.DragListGroup.EventType.BEFOREDRAGSTART, this, e, currDragItem, null, null)); 145  if(! rv) { 146    e.preventDefault(); 147    return; 148  } 149  this.currDragItem_ = currDragItem; 150  this.origList_ =(currDragItem.parentNode); 151  this.origNextItem_ = goog.dom.getNextElementSibling(currDragItem); 152  this.currHoverItem_ = this.origNextItem_; 153  this.currHoverList_ = this.origList_; 154  var draggerEl = this.cloneNode_(currDragItem); 155  this.draggerEl_ = draggerEl; 156  if(this.currDragItemClasses_) { 157    goog.dom.classes.add.apply(null, goog.array.concat(currDragItem, this.currDragItemClasses_)); 158  } else { 159    currDragItem.style.visibility = 'hidden'; 160  } 161  if(this.draggerElClass_) { 162    goog.dom.classes.add(draggerEl, this.draggerElClass_); 163  } 164  draggerEl.style.margin = '0px'; 165  draggerEl.style.position = 'absolute'; 166  goog.dom.getOwnerDocument(currDragItem).body.appendChild(draggerEl); 167  var currDragItemPos = goog.style.getPageOffset(currDragItem); 168  goog.style.setPageOffset(draggerEl, currDragItemPos); 169  var draggerElSize = goog.style.getSize(draggerEl); 170  draggerEl.halfWidth = draggerElSize.width / 2; 171  draggerEl.halfHeight = draggerElSize.height / 2; 172  if(this.updateWhileDragging_) { 173    currDragItem.style.display = 'none'; 174  } 175  this.recacheListAndItemBounds_(currDragItem); 176  currDragItem.style.display = ''; 177  this.dragger_ = new goog.fx.Dragger(draggerEl); 178  this.eventHandler_.listen(this.dragger_, goog.fx.Dragger.EventType.DRAG, this.handleDragMove_); 179  this.eventHandler_.listen(this.dragger_, goog.fx.Dragger.EventType.END, this.handleDragEnd_); 180  this.dragger_.startDrag(e); 181  this.dispatchEvent(new goog.fx.DragListGroupEvent(goog.fx.DragListGroup.EventType.DRAGSTART, this, e, currDragItem, draggerEl, this.dragger_)); 182}; 183goog.fx.DragListGroup.prototype.handleDragMove_ = function(dragEvent) { 184  var draggerElPos = goog.style.getPageOffset(this.draggerEl_); 185  var draggerElCenter = new goog.math.Coordinate(draggerElPos.x + this.draggerEl_.halfWidth, draggerElPos.y + this.draggerEl_.halfHeight); 186  var hoverList = this.getHoverDragList_(draggerElCenter); 187  var hoverNextItem = hoverList ? this.getHoverNextItem_(hoverList, draggerElCenter): null; 188  var rv = this.dispatchEvent(new goog.fx.DragListGroupEvent(goog.fx.DragListGroup.EventType.BEFOREDRAGMOVE, this, dragEvent, this.currDragItem_, this.draggerEl_, this.dragger_, draggerElCenter, hoverList, hoverNextItem)); 189  if(! rv) { 190    return false; 191  } 192  if(hoverList) { 193    if(this.updateWhileDragging_) { 194      this.insertCurrDragItem_(hoverList, hoverNextItem); 195    } else { 196      this.updateCurrHoverItem(hoverNextItem, draggerElCenter); 197    } 198    this.currDragItem_.style.display = ''; 199    if(hoverList.dlgDragHoverClass_) { 200      goog.dom.classes.add(hoverList, hoverList.dlgDragHoverClass_); 201    } 202  } else { 203    if(! this.isCurrDragItemAlwaysDisplayed_) { 204      this.currDragItem_.style.display = 'none'; 205    } 206    for(var i = 0, n = this.dragLists_.length; i < n; i ++) { 207      var dragList = this.dragLists_[i]; 208      if(dragList.dlgDragHoverClass_) { 209        goog.dom.classes.remove(dragList, dragList.dlgDragHoverClass_); 210      } 211    } 212  } 213  if(hoverList != this.currHoverList_) { 214    this.currHoverList_ = hoverList; 215    this.recacheListAndItemBounds_(this.currDragItem_); 216  } 217  this.dispatchEvent(new goog.fx.DragListGroupEvent(goog.fx.DragListGroup.EventType.DRAGMOVE, this, dragEvent,(this.currDragItem_), this.draggerEl_, this.dragger_, draggerElCenter, hoverList, hoverNextItem)); 218  return false; 219}; 220goog.fx.DragListGroup.prototype.handleDragEnd_ = function(dragEvent) { 221  var rv = this.dispatchEvent(new goog.fx.DragListGroupEvent(goog.fx.DragListGroup.EventType.BEFOREDRAGEND, this, dragEvent,(this.currDragItem_), this.draggerEl_, this.dragger_)); 222  if(! rv) { 223    return false; 224  } 225  if(! this.updateWhileDragging_) { 226    this.insertCurrHoverItem(); 227  } 228  this.cleanupDragDom_(); 229  this.dispatchEvent(new goog.fx.DragListGroupEvent(goog.fx.DragListGroup.EventType.DRAGEND, this, dragEvent, this.currDragItem_, this.draggerEl_, this.dragger_)); 230  this.currDragItem_ = null; 231  this.currHoverList_ = null; 232  this.origList_ = null; 233  this.origNextItem_ = null; 234  this.draggerEl_ = null; 235  this.dragger_ = null; 236  for(var i = 0, n = this.dragLists_.length; i < n; i ++) { 237    this.dragLists_[i].dlgBounds_ = null; 238  } 239  for(var i = 0, n = this.dragItems_.length; i < n; i ++) { 240    this.dragItems_[i].dlgBounds_ = null; 241  } 242  return true; 243}; 244goog.fx.DragListGroup.prototype.cleanupDragDom_ = function() { 245  goog.dispose(this.dragger_); 246  if(this.draggerEl_) { 247    goog.dom.removeNode(this.draggerEl_); 248  } 249  if(this.currDragItem_ && this.currDragItem_.style.display == 'none') { 250    this.origList_.insertBefore(this.currDragItem_, this.origNextItem_); 251    this.currDragItem_.style.display = ''; 252  } 253  if(this.currDragItemClasses_ && this.currDragItem_) { 254    goog.dom.classes.remove.apply(null, goog.array.concat(this.currDragItem_, this.currDragItemClasses_)); 255  } else if(this.currDragItem_) { 256    this.currDragItem_.style.visibility = 'visible'; 257  } 258  for(var i = 0, n = this.dragLists_.length; i < n; i ++) { 259    var dragList = this.dragLists_[i]; 260    if(dragList.dlgDragHoverClass_) { 261      goog.dom.classes.remove(dragList, dragList.dlgDragHoverClass_); 262    } 263  } 264}; 265goog.fx.DragListGroup.prototype.getHandleForDragItem_ = function(dragItem) { 266  return dragItem; 267}; 268goog.fx.DragListGroup.prototype.handleDragItemMouseover_ = function(e) { 269  goog.dom.classes.add.apply(null, goog.array.concat((e.currentTarget), this.dragItemHoverClasses_)); 270}; 271goog.fx.DragListGroup.prototype.handleDragItemMouseout_ = function(e) { 272  goog.dom.classes.remove.apply(null, goog.array.concat((e.currentTarget), this.dragItemHoverClasses_)); 273}; 274goog.fx.DragListGroup.prototype.handleDragItemHandleMouseover_ = function(e) { 275  goog.dom.classes.add.apply(null, goog.array.concat((e.currentTarget), this.dragItemHandleHoverClasses_)); 276}; 277goog.fx.DragListGroup.prototype.handleDragItemHandleMouseout_ = function(e) { 278  goog.dom.classes.remove.apply(null, goog.array.concat((e.currentTarget), this.dragItemHandleHoverClasses_)); 279}; 280goog.fx.DragListGroup.prototype.getHoverDragList_ = function(draggerElCenter) { 281  var prevHoverList = null; 282  if(this.currDragItem_.style.display != 'none') { 283    prevHoverList =(this.currDragItem_.parentNode); 284    var prevHoverListBounds = goog.style.getBounds(prevHoverList); 285    if(this.isInRect_(draggerElCenter, prevHoverListBounds)) { 286      return prevHoverList; 287    } 288  } 289  for(var i = 0, n = this.dragLists_.length; i < n; i ++) { 290    var dragList = this.dragLists_[i]; 291    if(dragList == prevHoverList) { 292      continue; 293    } 294    if(this.isInRect_(draggerElCenter, dragList.dlgBounds_)) { 295      return dragList; 296    } 297  } 298  return null; 299}; 300goog.fx.DragListGroup.prototype.isInRect_ = function(pos, rect) { 301  return pos.x > rect.left && pos.x < rect.left + rect.width && pos.y > rect.top && pos.y < rect.top + rect.height; 302}; 303goog.fx.DragListGroup.prototype.updateCurrHoverItem = function(hoverNextItem, opt_draggerElCenter) { 304  if(goog.isDefAndNotNull(hoverNextItem)) { 305    this.currHoverItem_ = hoverNextItem; 306  } 307}; 308goog.fx.DragListGroup.prototype.insertCurrHoverItem = function() { 309  this.origList_.insertBefore(this.currDragItem_, this.currHoverItem_); 310}; 311goog.fx.DragListGroup.prototype.getHoverNextItem_ = function(hoverList, draggerElCenter) { 312  if(hoverList == null) { 313    throw Error('getHoverNextItem_ called with null hoverList.'); 314  } 315  var relevantCoord; 316  var getRelevantBoundFn; 317  var isBeforeFn; 318  var pickClosestRow = false; 319  var distanceToClosestRow = undefined; 320  switch(hoverList.dlgGrowthDirection_) { 321    case goog.fx.DragListDirection.DOWN: 322      relevantCoord = draggerElCenter.y; 323      getRelevantBoundFn = goog.fx.DragListGroup.getBottomBound_; 324      isBeforeFn = goog.fx.DragListGroup.isLessThan_; 325      break; 326    case goog.fx.DragListDirection.RIGHT_2D: 327      pickClosestRow = true; 328    case goog.fx.DragListDirection.RIGHT: 329      relevantCoord = draggerElCenter.x; 330      getRelevantBoundFn = goog.fx.DragListGroup.getRightBound_; 331      isBeforeFn = goog.fx.DragListGroup.isLessThan_; 332      break; 333    case goog.fx.DragListDirection.LEFT_2D: 334      pickClosestRow = true; 335    case goog.fx.DragListDirection.LEFT: 336      relevantCoord = draggerElCenter.x; 337      getRelevantBoundFn = goog.fx.DragListGroup.getLeftBound_; 338      isBeforeFn = goog.fx.DragListGroup.isGreaterThan_; 339      break; 340  } 341  var earliestAfterItem = null; 342  var earliestAfterItemRelevantBound; 343  var hoverListItems = goog.dom.getChildren(hoverList); 344  for(var i = 0, n = hoverListItems.length; i < n; i ++) { 345    var item = hoverListItems[i]; 346    if(item == this.currDragItem_) { 347      continue; 348    } 349    var relevantBound = getRelevantBoundFn(item.dlgBounds_); 350    if(pickClosestRow) { 351      var distanceToRow = goog.fx.DragListGroup.verticalDistanceFromItem_(item, draggerElCenter); 352      if(! goog.isDef(distanceToClosestRow)) { 353        distanceToClosestRow = distanceToRow; 354      } 355      if(isBeforeFn(relevantCoord, relevantBound) &&(earliestAfterItemRelevantBound == undefined ||(distanceToRow < distanceToClosestRow) ||((distanceToRow == distanceToClosestRow) &&(isBeforeFn(relevantBound, earliestAfterItemRelevantBound) || relevantBound == earliestAfterItemRelevantBound)))) { 356        earliestAfterItem = item; 357        earliestAfterItemRelevantBound = relevantBound; 358      } 359      if(distanceToRow < distanceToClosestRow) { 360        distanceToClosestRow = distanceToRow; 361      } 362    } else if(isBeforeFn(relevantCoord, relevantBound) &&(earliestAfterItemRelevantBound == undefined || isBeforeFn(relevantBound, earliestAfterItemRelevantBound))) { 363      earliestAfterItem = item; 364      earliestAfterItemRelevantBound = relevantBound; 365    } 366  } 367  if(! goog.isNull(earliestAfterItem) && goog.fx.DragListGroup.verticalDistanceFromItem_(earliestAfterItem, draggerElCenter) > distanceToClosestRow) { 368    return null; 369  } else { 370    return earliestAfterItem; 371  } 372}; 373goog.fx.DragListGroup.verticalDistanceFromItem_ = function(item, target) { 374  var itemBounds = item.dlgBounds_; 375  var itemCenterY = itemBounds.top +(itemBounds.height - 1) / 2; 376  return Math.abs(target.y - itemCenterY); 377}; 378goog.fx.DragListGroup.getBottomBound_ = function(itemBounds) { 379  return itemBounds.top + itemBounds.height - 1; 380}; 381goog.fx.DragListGroup.getRightBound_ = function(itemBounds) { 382  return itemBounds.left + itemBounds.width - 1; 383}; 384goog.fx.DragListGroup.getLeftBound_ = function(itemBounds) { 385  return itemBounds.left || 0; 386}; 387goog.fx.DragListGroup.isLessThan_ = function(a, b) { 388  return a < b; 389}; 390goog.fx.DragListGroup.isGreaterThan_ = function(a, b) { 391  return a > b; 392}; 393goog.fx.DragListGroup.prototype.insertCurrDragItem_ = function(hoverList, hoverNextItem) { 394  if(this.currDragItem_.parentNode != hoverList || goog.dom.getNextElementSibling(this.currDragItem_) != hoverNextItem) { 395    hoverList.insertBefore(this.currDragItem_, hoverNextItem); 396  } 397}; 398goog.fx.DragListGroup.prototype.cloneNode_ = function(sourceEl) { 399  var clonedEl =(sourceEl.cloneNode(true)); 400  switch(sourceEl.tagName.toLowerCase()) { 401    case 'tr': 402      return goog.dom.createDom('table', null, goog.dom.createDom('tbody', null, clonedEl)); 403    case 'td': 404    case 'th': 405      return goog.dom.createDom('table', null, goog.dom.createDom('tbody', null, goog.dom.createDom('tr', null, clonedEl))); 406    default: 407      return clonedEl; 408  } 409}; 410goog.fx.DragListGroupEvent = function(type, dragListGroup, event, currDragItem, draggerEl, dragger, opt_draggerElCenter, opt_hoverList, opt_hoverNextItem) { 411  goog.events.Event.call(this, type); 412  this.dragListGroup = dragListGroup; 413  this.event = event; 414  this.currDragItem = currDragItem; 415  this.draggerEl = draggerEl; 416  this.dragger = dragger; 417  this.draggerElCenter = opt_draggerElCenter; 418  this.hoverList = opt_hoverList; 419  this.hoverNextItem = opt_hoverNextItem; 420}; ...

MultiDrag.js

Source:MultiDrag.js

1import {2	toggleClass,3	getRect,4	index,5	closest,6	on,7	off,8	clone,9	css,10	setRect,11	unsetRect,12	matrix,13	expando14} from '../../src/utils.js';15import dispatchEvent from '../../src/EventDispatcher.js';16let multiDragElements = [],17	multiDragClones = [],18	lastMultiDragSelect, // for selection with modifier key down (SHIFT)19	multiDragSortable,20	initialFolding = false, // Initial multi-drag fold when drag started21	folding = false, // Folding any other time22	dragStarted = false,23	dragEl,24	clonesFromRect,25	clonesHidden;26function MultiDragPlugin() {27	function MultiDrag(sortable) {28		// Bind all private methods29		for (let fn in this) {30			if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {31				this[fn] = this[fn].bind(this);32			}33		}34		if (sortable.options.supportPointer) {35			on(document, 'pointerup', this._deselectMultiDrag);36		} else {37			on(document, 'mouseup', this._deselectMultiDrag);38			on(document, 'touchend', this._deselectMultiDrag);39		}40		on(document, 'keydown', this._checkKeyDown);41		on(document, 'keyup', this._checkKeyUp);42		this.defaults = {43			selectedClass: 'sortable-selected',44			multiDragKey: null,45			setData(dataTransfer, dragEl) {46				let data = '';47				if (multiDragElements.length && multiDragSortable === sortable) {48					multiDragElements.forEach((multiDragElement, i) => {49						data += (!i ? '' : ', ') + multiDragElement.textContent;50					});51				} else {52					data = dragEl.textContent;53				}54				dataTransfer.setData('Text', data);55			}56		};57	}58	MultiDrag.prototype = {59		multiDragKeyDown: false,60		isMultiDrag: false,61		delayStartGlobal({ dragEl: dragged }) {62			dragEl = dragged;63		},64		delayEnded() {65			this.isMultiDrag = ~multiDragElements.indexOf(dragEl);66		},67		setupClone({ sortable, cancel }) {68			if (!this.isMultiDrag) return;69			for (let i = 0; i < multiDragElements.length; i++) {70				multiDragClones.push(clone(multiDragElements[i]));71				multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex;72				multiDragClones[i].draggable = false;73				multiDragClones[i].style['will-change'] = '';74				toggleClass(multiDragClones[i], this.options.selectedClass, false);75				multiDragElements[i] === dragEl && toggleClass(multiDragClones[i], this.options.chosenClass, false);76			}77			sortable._hideClone();78			cancel();79		},80		clone({ sortable, rootEl, dispatchSortableEvent, cancel }) {81			if (!this.isMultiDrag) return;82			if (!this.options.removeCloneOnHide) {83				if (multiDragElements.length && multiDragSortable === sortable) {84					insertMultiDragClones(true, rootEl);85					dispatchSortableEvent('clone');86					cancel();87				}88			}89		},90		showClone({ cloneNowShown, rootEl, cancel }) {91			if (!this.isMultiDrag) return;92			insertMultiDragClones(false, rootEl);93			multiDragClones.forEach(clone => {94				css(clone, 'display', '');95			});96			cloneNowShown();97			clonesHidden = false;98			cancel();99		},100		hideClone({ sortable, cloneNowHidden, cancel }) {101			if (!this.isMultiDrag) return;102			multiDragClones.forEach(clone => {103				css(clone, 'display', 'none');104				if (this.options.removeCloneOnHide && clone.parentNode) {105					clone.parentNode.removeChild(clone);106				}107			});108			cloneNowHidden();109			clonesHidden = true;110			cancel();111		},112		dragStartGlobal({ sortable }) {113			if (!this.isMultiDrag && multiDragSortable) {114				multiDragSortable.multiDrag._deselectMultiDrag();115			}116			multiDragElements.forEach(multiDragElement => {117				multiDragElement.sortableIndex = index(multiDragElement);118			});119			// Sort multi-drag elements120			multiDragElements = multiDragElements.sort(function(a, b) {121				return a.sortableIndex - b.sortableIndex;122			});123			dragStarted = true;124		},125		dragStarted({ sortable }) {126			if (!this.isMultiDrag) return;127			if (this.options.sort) {128				// Capture rects,129				// hide multi drag elements (by positioning them absolute),130				// set multi drag elements rects to dragRect,131				// show multi drag elements,132				// animate to rects,133				// unset rects & remove from DOM134				sortable.captureAnimationState();135				if (this.options.animation) {136					multiDragElements.forEach(multiDragElement => {137						if (multiDragElement === dragEl) return;138						css(multiDragElement, 'position', 'absolute');139					});140					let dragRect = getRect(dragEl, false, true, true);141					multiDragElements.forEach(multiDragElement => {142						if (multiDragElement === dragEl) return;143						setRect(multiDragElement, dragRect);144					});145					folding = true;146					initialFolding = true;147				}148			}149			sortable.animateAll(() => {150				folding = false;151				initialFolding = false;152				if (this.options.animation) {153					multiDragElements.forEach(multiDragElement => {154						unsetRect(multiDragElement);155					});156				}157				// Remove all auxiliary multidrag items from el, if sorting enabled158				if (this.options.sort) {159					removeMultiDragElements();160				}161			});162		},163		dragOver({ target, completed, cancel }) {164			if (folding && ~multiDragElements.indexOf(target)) {165				completed(false);166				cancel();167			}168		},169		revert({ fromSortable, rootEl, sortable, dragRect }) {170			if (multiDragElements.length > 1) {171				// Setup unfold animation172				multiDragElements.forEach(multiDragElement => {173					sortable.addAnimationState({174						target: multiDragElement,175						rect: folding ? getRect(multiDragElement) : dragRect176					});177					unsetRect(multiDragElement);178					multiDragElement.fromRect = dragRect;179					fromSortable.removeAnimationState(multiDragElement);180				});181				folding = false;182				insertMultiDragElements(!this.options.removeCloneOnHide, rootEl);183			}184		},185		dragOverCompleted({ sortable, isOwner, insertion, activeSortable, parentEl, putSortable }) {186			let options = this.options;187			if (insertion) {188				// Clones must be hidden before folding animation to capture dragRectAbsolute properly189				if (isOwner) {190					activeSortable._hideClone();191				}192				initialFolding = false;193				// If leaving sort:false root, or already folding - Fold to new location194				if (options.animation && multiDragElements.length > 1 && (folding || !isOwner && !activeSortable.options.sort && !putSortable)) {195					// Fold: Set all multi drag elements's rects to dragEl's rect when multi-drag elements are invisible196					let dragRectAbsolute = getRect(dragEl, false, true, true);197					multiDragElements.forEach(multiDragElement => {198						if (multiDragElement === dragEl) return;199						setRect(multiDragElement, dragRectAbsolute);200						// Move element(s) to end of parentEl so that it does not interfere with multi-drag clones insertion if they are inserted201						// while folding, and so that we can capture them again because old sortable will no longer be fromSortable202						parentEl.appendChild(multiDragElement);203					});204					folding = true;205				}206				// Clones must be shown (and check to remove multi drags) after folding when interfering multiDragElements are moved out207				if (!isOwner) {208					// Only remove if not folding (folding will remove them anyways)209					if (!folding) {210						removeMultiDragElements();211					}212					if (multiDragElements.length > 1) {213						let clonesHiddenBefore = clonesHidden;214						activeSortable._showClone(sortable);215						// Unfold animation for clones if showing from hidden216						if (activeSortable.options.animation && !clonesHidden && clonesHiddenBefore) {217							multiDragClones.forEach(clone => {218								activeSortable.addAnimationState({219									target: clone,220									rect: clonesFromRect221								});222								clone.fromRect = clonesFromRect;223								clone.thisAnimationDuration = null;224							});225						}226					} else {227						activeSortable._showClone(sortable);228					}229				}230			}231		},232		dragOverAnimationCapture({ dragRect, isOwner, activeSortable }) {233			multiDragElements.forEach(multiDragElement => {234				multiDragElement.thisAnimationDuration = null;235			});236			if (activeSortable.options.animation && !isOwner && activeSortable.multiDrag.isMultiDrag) {237				clonesFromRect = Object.assign({}, dragRect);238				let dragMatrix = matrix(dragEl, true);239				clonesFromRect.top -= dragMatrix.f;240				clonesFromRect.left -= dragMatrix.e;241			}242		},243		dragOverAnimationComplete() {244			if (folding) {245				folding = false;246				removeMultiDragElements();247			}248		},249		drop({ originalEvent: evt, rootEl, parentEl, sortable, dispatchSortableEvent, oldIndex, putSortable }) {250			let toSortable = (putSortable || this.sortable);251			if (!evt) return;252			let options = this.options,253				children = parentEl.children;254			// Multi-drag selection255			if (!dragStarted) {256				if (options.multiDragKey && !this.multiDragKeyDown) {257					this._deselectMultiDrag();258				}259				toggleClass(dragEl, options.selectedClass, !~multiDragElements.indexOf(dragEl));260				if (!~multiDragElements.indexOf(dragEl)) {261					multiDragElements.push(dragEl);262					dispatchEvent({263						sortable,264						rootEl,265						name: 'select',266						targetEl: dragEl,267						originalEvt: evt268					});269					// Modifier activated, select from last to dragEl270					if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) {271						let lastIndex = index(lastMultiDragSelect),272							currentIndex = index(dragEl);273						if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) {274							// Must include lastMultiDragSelect (select it), in case modified selection from no selection275							// (but previous selection existed)276							let n, i;277							if (currentIndex > lastIndex) {278								i = lastIndex;279								n = currentIndex;280							} else {281								i = currentIndex;282								n = lastIndex + 1;283							}284							for (; i < n; i++) {285								if (~multiDragElements.indexOf(children[i])) continue;286								toggleClass(children[i], options.selectedClass, true);287								multiDragElements.push(children[i]);288								dispatchEvent({289									sortable,290									rootEl,291									name: 'select',292									targetEl: children[i],293									originalEvt: evt294								});295							}296						}297					} else {298						lastMultiDragSelect = dragEl;299					}300					multiDragSortable = toSortable;301				} else {302					multiDragElements.splice(multiDragElements.indexOf(dragEl), 1);303					lastMultiDragSelect = null;304					dispatchEvent({305						sortable,306						rootEl,307						name: 'deselect',308						targetEl: dragEl,309						originalEvt: evt310					});311				}312			}313			// Multi-drag drop314			if (dragStarted && this.isMultiDrag) {315				// Do not "unfold" after around dragEl if reverted316				if ((parentEl[expando].options.sort || parentEl !== rootEl) && multiDragElements.length > 1) {317					let dragRect = getRect(dragEl),318						multiDragIndex = index(dragEl, ':not(.' + this.options.selectedClass + ')');319					if (!initialFolding && options.animation) dragEl.thisAnimationDuration = null;320					toSortable.captureAnimationState();321					if (!initialFolding) {322						if (options.animation) {323							dragEl.fromRect = dragRect;324							multiDragElements.forEach(multiDragElement => {325								multiDragElement.thisAnimationDuration = null;326								if (multiDragElement !== dragEl) {327									let rect = folding ? getRect(multiDragElement) : dragRect;328									multiDragElement.fromRect = rect;329									// Prepare unfold animation330									toSortable.addAnimationState({331										target: multiDragElement,332										rect: rect333									});334								}335							});336						}337						// Multi drag elements are not necessarily removed from the DOM on drop, so to reinsert338						// properly they must all be removed339						removeMultiDragElements();340						multiDragElements.forEach(multiDragElement => {341							if (children[multiDragIndex]) {342								parentEl.insertBefore(multiDragElement, children[multiDragIndex]);343							} else {344								parentEl.appendChild(multiDragElement);345							}346							multiDragIndex++;347						});348						// If initial folding is done, the elements may have changed position because they are now349						// unfolding around dragEl, even though dragEl may not have his index changed, so update event350						// must be fired here as Sortable will not.351						if (oldIndex === index(dragEl)) {352							let update = false;353							multiDragElements.forEach(multiDragElement => {354								if (multiDragElement.sortableIndex !== index(multiDragElement)) {355									update = true;356									return;357								}358							});359							if (update) {360								dispatchSortableEvent('update');361							}362						}363					}364					// Must be done after capturing individual rects (scroll bar)365					multiDragElements.forEach(multiDragElement => {366						unsetRect(multiDragElement);367					});368					toSortable.animateAll();369				}370				multiDragSortable = toSortable;371			}372			// Remove clones if necessary373			if (rootEl === parentEl || (putSortable && putSortable.lastPutMode !== 'clone')) {374				multiDragClones.forEach(clone => {375					clone.parentNode && clone.parentNode.removeChild(clone);376				});377			}378		},379		nullingGlobal() {380			this.isMultiDrag =381			dragStarted = false;382			multiDragClones.length = 0;383		},384		destroyGlobal() {385			this._deselectMultiDrag();386			off(document, 'pointerup', this._deselectMultiDrag);387			off(document, 'mouseup', this._deselectMultiDrag);388			off(document, 'touchend', this._deselectMultiDrag);389			off(document, 'keydown', this._checkKeyDown);390			off(document, 'keyup', this._checkKeyUp);391		},392		_deselectMultiDrag(evt) {393			if (typeof dragStarted !== "undefined" && dragStarted) return;394			// Only deselect if selection is in this sortable395			if (multiDragSortable !== this.sortable) return;396			// Only deselect if target is not item in this sortable397			if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return;398			// Only deselect if left click399			if (evt && evt.button !== 0) return;400			while (multiDragElements.length) {401				let el = multiDragElements[0];402				toggleClass(el, this.options.selectedClass, false);403				multiDragElements.shift();404				dispatchEvent({405					sortable: this.sortable,406					rootEl: this.sortable.el,407					name: 'deselect',408					targetEl: el,409					originalEvt: evt410				});411			}412		},413		_checkKeyDown(evt) {414			if (evt.key === this.options.multiDragKey) {415				this.multiDragKeyDown = true;416			}417		},418		_checkKeyUp(evt) {419			if (evt.key === this.options.multiDragKey) {420				this.multiDragKeyDown = false;421			}422		}423	};424	return Object.assign(MultiDrag, {425		// Static methods & properties426		pluginName: 'multiDrag',427		utils: {428			/**429			 * Selects the provided multi-drag item430			 * @param  {HTMLElement} el    The element to be selected431			 */432			select(el) {433				let sortable = el.parentNode[expando];434				if (!sortable || !sortable.options.multiDrag || ~multiDragElements.indexOf(el)) return;435				if (multiDragSortable && multiDragSortable !== sortable) {436					multiDragSortable.multiDrag._deselectMultiDrag();437					multiDragSortable = sortable;438				}439				toggleClass(el, sortable.options.selectedClass, true);440				multiDragElements.push(el);441			},442			/**443			 * Deselects the provided multi-drag item444			 * @param  {HTMLElement} el    The element to be deselected445			 */446			deselect(el) {447				let sortable = el.parentNode[expando],448					index = multiDragElements.indexOf(el);449				if (!sortable || !sortable.options.multiDrag || !~index) return;450				toggleClass(el, sortable.options.selectedClass, false);451				multiDragElements.splice(index, 1);452			}453		},454		eventProperties() {455			const oldIndicies = [],456				newIndicies = [];457			multiDragElements.forEach(multiDragElement => {458				oldIndicies.push({459					multiDragElement,460					index: multiDragElement.sortableIndex461				});462				// multiDragElements will already be sorted if folding463				let newIndex;464				if (folding && multiDragElement !== dragEl) {465					newIndex = -1;466				} else if (folding) {467					newIndex = index(multiDragElement, ':not(.' + this.options.selectedClass + ')');468				} else {469					newIndex = index(multiDragElement);470				}471				newIndicies.push({472					multiDragElement,473					index: newIndex474				});475			});476			return {477				items: [...multiDragElements],478				clones: [...multiDragClones],479				oldIndicies,480				newIndicies481			};482		},483		optionListeners: {484			multiDragKey(key) {485				key = key.toLowerCase();486				if (key === 'ctrl') {487					key = 'Control';488				} else if (key.length > 1) {489					key = key.charAt(0).toUpperCase() + key.substr(1);490				}491				return key;492			}493		}494	});495}496function insertMultiDragElements(clonesInserted, rootEl) {497	multiDragElements.forEach((multiDragElement, i) => {498		let target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)];499		if (target) {500			rootEl.insertBefore(multiDragElement, target);501		} else {502			rootEl.appendChild(multiDragElement);503		}504	});505}506/**507 * Insert multi-drag clones508 * @param  {[Boolean]} elementsInserted  Whether the multi-drag elements are inserted509 * @param  {HTMLElement} rootEl510 */511function insertMultiDragClones(elementsInserted, rootEl) {512	multiDragClones.forEach((clone, i) => {513		let target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)];514		if (target) {515			rootEl.insertBefore(clone, target);516		} else {517			rootEl.appendChild(clone);518		}519	});520}521function removeMultiDragElements() {522	multiDragElements.forEach(multiDragElement => {523		if (multiDragElement === dragEl) return;524		multiDragElement.parentNode && multiDragElement.parentNode.removeChild(multiDragElement);525	});526}...

drag.js

Source:drag.js

1/* global $q, $create, Blyde */2"use strict";3{4	let mouseX = 0, mouseY = 0;5	window.on('mousemove', (e) => {6		mouseX = e.clientX;7		mouseY = e.clientY;8	});9	window.on('touchmove', (e) => {10		mouseX = e.touches[0].clientX;11		mouseY = e.touches[0].clientY;12	});13	window.on('touchstart', (e) => {14		mouseX = e.touches[0].clientX;15		mouseY = e.touches[0].clientY;16	});1718	const createCase = (node) => {19		let dragCase = $create('dragcase');20		let dragHolder = $create('dragHolder');21		let clientStyle = node.getBoundingClientRect();22		let computedStyle = window.getComputedStyle(node);23		dragCase.dragger = {24			posX: clientStyle.left,25			posY: clientStyle.top,26			deg: 027		};28		dragCase.style.position = 'fixed';29		dragCase.style.display = 'block';30		dragCase.style.left = dragCase.dragger.posX + 'px';31		dragCase.style.top = dragCase.dragger.posY + 'px';32		dragHolder.style.display = computedStyle.display;33		dragHolder.style.float = computedStyle.float;34		dragCase.append(dragHolder);35		node.dragCase = dragCase;36		node.dragHolder = dragHolder;37		return dragCase;38	};3940	const drag = function() {41		let diffX = 0, diffY = 0;4243		if (this.dragging) {44			diffX = mouseX - this.clientWidth/2 - this.dragger.posX;45			diffY = mouseY - this.dragger.posY  + 40;46		} else {47			diffX = this.dragger.targetX - this.dragger.posX;48			diffY = this.dragger.targetY - this.dragger.posY;49			if ((Math.pow(diffX, 2) + Math.pow(diffY, 2)) < 0.05) {50				this.style.left = this.dragger.targetX + 'px';51				this.style.top = this.dragger.targetY + 'px';52				this.style.transform = `rotate(0deg)`;53				window.cancelAnimationFrame(this.dragID);54				this.dragger.dragID = null;55				if (this.dragger.callback) this.dragger.callback();56				return;57			}58		}5960		let diffDeg = Math.tan(diffX/(Math.abs(this.dragger.posY - mouseY) + Math.sqrt(Math.pow(this.clientHeight, 2) + Math.pow(this.clientWidth, 2))*2 + 100 + Math.abs(diffX)))/Math.PI*180;61		if (diffDeg > 60) {62			diffDeg = 60;63		} else if (diffDeg < -60) {64			diffDeg = -60;65		}66		diffDeg = diffDeg - this.dragger.deg;67		this.dragger.posX = this.dragger.posX + diffX/8;68		this.dragger.posY = this.dragger.posY + diffY/8;69		this.dragger.deg = this.dragger.deg + diffDeg/8;70		this.style.left = this.dragger.posX + 'px';71		this.style.top = this.dragger.posY + 'px';72		this.style.transform = `rotate(${this.dragger.deg}deg)`;7374		this.dragger.dragID = window.requestAnimationFrame(drag.bind(this));75	};7677	Blyde.fn('Dragjs', {78		node: {79			startDrag(width, height) {80				if (this.parentNode.dragging || this.tagName.toUpperCase() === 'DRAGCASE') return this;81				let dragCase = '';82				if (this.parentNode.tagName.toUpperCase() === 'DRAGCASE') {83					dragCase = this.parentNode;84				} else {85					dragCase = createCase(this);86					if (width) dragCase.style.width = width;87					if (height) dragCase.style.height = height;88					this.swap(this.dragHolder);89				}90				$q('body').appendChild(dragCase);91				dragCase.dragging = true;92				if (!dragCase.dragger.dragID) {93					drag.call(dragCase);94				}95				return this;96			},97			dragRelease(cb) {98				if (this.tagName.toUpperCase() === 'DRAGCASE') return this;99				if (this.parentNode.tagName.toUpperCase() === 'DRAGCASE' && this.parentNode.dragging === true) {100					this.dragCase.dragger.callback = cb;101					this.dragCase.dragger.targetX = mouseX - this.dragCase.clientWidth/2;102					this.dragCase.dragger.targetY = mouseY;103					this.dragCase.dragging = false;104				}105				return this;106			},107			stopDrag(cb) {108				if (this.tagName.toUpperCase() === 'DRAGCASE') return this;109				if (this.dragCase) {110					if (this.dragCase.dragger.dragID) {111						window.cancelAnimationFrame(this.dragCase.dragger.dragID);112					}113					if (cb) {114						cb();115					} else {116						this.dragHolder.swap(this);117					}118					this.dragHolder.remove();119					this.dragCase.remove();120					this.dragHolder = null;121					this.dragCase = null;122				}123				return this;124			},125			moveTo(x, y, cb) {126				if (this.tagName.toUpperCase() === 'DRAGCASE') return this;127				this.startDrag().dragRelease(cb);128				this.dragCase.dragger.targetX = x;129				this.dragCase.dragger.targetY = y;130				return this;131			}132		}133	}, true);
...

DragAndDrop.js

Source:DragAndDrop.js

1/*2	Copyright (c) 2004-2006, The Dojo Foundation3	All Rights Reserved.4	Licensed under the Academic Free License version 2.1 or above OR the5	modified BSD license. For more information on Dojo licensing, see:6		http://dojotoolkit.org/community/licensing.shtml7*/8dojo.require("dojo.lang.common");9dojo.require("dojo.lang.declare");10dojo.provide("dojo.dnd.DragAndDrop");11dojo.declare("dojo.dnd.DragSource", null, {12	type: "",13	onDragEnd: function(){14	},15	onDragStart: function(){16	},17	/*18	 * This function gets called when the DOM element was 19	 * selected for dragging by the HtmlDragAndDropManager.20	 */21	onSelected: function(){22	},23	unregister: function(){24		dojo.dnd.dragManager.unregisterDragSource(this);25	},26	reregister: function(){27		dojo.dnd.dragManager.registerDragSource(this);28	}29}, function(){30	//dojo.profile.start("DragSource");31	var dm = dojo.dnd.dragManager;32	if(dm["registerDragSource"]){ // side-effect prevention33		dm.registerDragSource(this);34	}35	//dojo.profile.end("DragSource");36});37dojo.declare("dojo.dnd.DragObject", null, {38	type: "",39	onDragStart: function(){40		// gets called directly after being created by the DragSource41		// default action is to clone self as icon42	},43	onDragMove: function(){44		// this changes the UI for the drag icon45		//	"it moves itself"46	},47	onDragOver: function(){48	},49	onDragOut: function(){50	},51	onDragEnd: function(){52	},53	// normal aliases54	onDragLeave: this.onDragOut,55	onDragEnter: this.onDragOver,56	// non-camel aliases57	ondragout: this.onDragOut,58	ondragover: this.onDragOver59}, function(){60	var dm = dojo.dnd.dragManager;61	if(dm["registerDragObject"]){ // side-effect prevention62		dm.registerDragObject(this);63	}64});65dojo.declare("dojo.dnd.DropTarget", null, {66	acceptsType: function(type){67		if(!dojo.lang.inArray(this.acceptedTypes, "*")){ // wildcard68			if(!dojo.lang.inArray(this.acceptedTypes, type)) { return false; }69		}70		return true;71	},72	accepts: function(dragObjects){73		if(!dojo.lang.inArray(this.acceptedTypes, "*")){ // wildcard74			for (var i = 0; i < dragObjects.length; i++) {75				if (!dojo.lang.inArray(this.acceptedTypes,76					dragObjects[i].type)) { return false; }77			}78		}79		return true;80	},81	unregister: function(){82		dojo.dnd.dragManager.unregisterDropTarget(this);83	},84	onDragOver: function(){85	},86	onDragOut: function(){87	},88	onDragMove: function(){89	},90	onDropStart: function(){91	},92	onDrop: function(){93	},94	onDropEnd: function(){95	}96}, function(){97	if (this.constructor == dojo.dnd.DropTarget) { return; } // need to be subclassed98	this.acceptedTypes = [];99	dojo.dnd.dragManager.registerDropTarget(this);100});101// NOTE: this interface is defined here for the convenience of the DragManager102// implementor. It is expected that in most cases it will be satisfied by103// extending a native event (DOM event in HTML and SVG).104dojo.dnd.DragEvent = function(){105	this.dragSource = null;106	this.dragObject = null;107	this.target = null;108	this.eventStatus = "success";109	//110	// can be one of:111	//	[	"dropSuccess", "dropFailure", "dragMove",112	//		"dragStart", "dragEnter", "dragLeave"]113	//114}115/*116 *	The DragManager handles listening for low-level events and dispatching117 *	them to higher-level primitives like drag sources and drop targets. In118 *	order to do this, it must keep a list of the items.119 */120dojo.declare("dojo.dnd.DragManager", null, {121	selectedSources: [],122	dragObjects: [],123	dragSources: [],124	registerDragSource: function(){},125	dropTargets: [],126	registerDropTarget: function(){},127	lastDragTarget: null,128	currentDragTarget: null,129	onKeyDown: function(){},130	onMouseOut: function(){},131	onMouseMove: function(){},132	onMouseUp: function(){}133});134// NOTE: despite the existance of the DragManager class, there will be a135// singleton drag manager provided by the renderer-specific D&D support code.136// It is therefore sane for us to assign instance variables to the DragManager137// prototype138// The renderer-specific file will define the following object:...

HtmlDragCopy.js

Source:HtmlDragCopy.js

1/*2	Copyright (c) 2004-2006, The Dojo Foundation3	All Rights Reserved.4	Licensed under the Academic Free License version 2.1 or above OR the5	modified BSD license. For more information on Dojo licensing, see:6		http://dojotoolkit.org/community/licensing.shtml7*/8dojo.provide("dojo.dnd.HtmlDragCopy");9dojo.require("dojo.dnd.*");10dojo.declare("dojo.dnd.HtmlDragCopySource", dojo.dnd.HtmlDragSource,11function(node, type, copyOnce){12		this.copyOnce = copyOnce;13		this.makeCopy = true;14},15{16	onDragStart: function(){17		var dragObj = new dojo.dnd.HtmlDragCopyObject(this.dragObject, this.type, this);18		if(this.dragClass) { dragObj.dragClass = this.dragClass; }19		if (this.constrainToContainer) {20			dragObj.constrainTo(this.constrainingContainer || this.domNode.parentNode);21		}22		return dragObj;23	},24	onSelected: function() {25		for (var i=0; i<this.dragObjects.length; i++) {26			dojo.dnd.dragManager.selectedSources.push(new dojo.dnd.HtmlDragCopySource(this.dragObjects[i]));27		}28	}29});30dojo.declare("dojo.dnd.HtmlDragCopyObject", dojo.dnd.HtmlDragObject,31function(dragObject, type, source){32		this.copySource = source;33},34{35	onDragStart: function(e) {36		dojo.dnd.HtmlDragCopyObject.superclass.onDragStart.apply(this, arguments);37		if(this.copySource.makeCopy) {38			this.sourceNode = this.domNode;39			this.domNode    = this.domNode.cloneNode(true);40		}41	},42	onDragEnd: function(e){43		switch(e.dragStatus){44			case "dropFailure": // slide back to the start45				var startCoords = dojo.html.getAbsolutePosition(this.dragClone, true);46				// offset the end so the effect can be seen47				var endCoords = { left: this.dragStartPosition.x + 1,48					top: this.dragStartPosition.y + 1};49				// animate50				var anim = dojo.lfx.slideTo(this.dragClone, endCoords, 500, dojo.lfx.easeOut);51				var dragObject = this;52				dojo.event.connect(anim, "onEnd", function (e) {53					// pause for a second (not literally) and disappear54					dojo.lang.setTimeout(function() {55							dojo.html.removeNode(dragObject.dragClone);56							dragObject.dragClone = null;57							if(dragObject.copySource.makeCopy) {58								dojo.html.removeNode(dragObject.domNode);59								dragObject.domNode = dragObject.sourceNode;60								dragObject.sourceNode = null;61							}62						},63						200);64				});65				anim.play();66				dojo.event.topic.publish('dragEnd', { source: this } );67				return;68		}69		dojo.dnd.HtmlDragCopyObject.superclass.onDragEnd.apply(this, arguments);70		this.copySource.dragObject = this.domNode;71		if(this.copySource.copyOnce){72			this.copySource.makeCopy = false;73		}74		new dojo.dnd.HtmlDragCopySource(this.sourceNode, this.type, this.copySource.copyOnce);75		this.sourceNode = null;76	}...

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.drag('#tsf > div:nth-child(2) > div > div.RNNXgb > div > div.a4bIc > input', 100, 100);7  await page.screenshot({ path: 'drag.png' });8  await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12  const browser = await chromium.launch();13  const context = await browser.newContext();14  const page = await context.newPage();15  await page.drag('#tsf > div:nth-child(2) > div > div.RNNXgb > div > div.a4bIc > input', 100, 100);16  await page.screenshot({ path: 'drag.png' });17  await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21  const browser = await chromium.launch();22  const context = await browser.newContext();23  const page = await context.newPage();24  await page.drag('#tsf > div:nth-child(2) > div > div.RNNXgb > div > div.a4bIc > input', 100, 100);25  await page.screenshot({ path: 'drag.png' });26  await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30  const browser = await chromium.launch();31  const context = await browser.newContext();32  const page = await context.newPage();33  await page.drag('#tsf > div:nth-child(2) > div > div.RNNXgb > div > div.a4bIc > input', 100, 100);34  await page.screenshot({ path: 'drag.png' });35  await browser.close();36})();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.drag('#tsf > div:nth-child(2) > div.A8SBwf.emcav > div.RNNXgb > div > div.a4bIc > input', 100, 100);7  await page.screenshot({ path: `drag.png` });8  await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12  const browser = await chromium.launch();13  const context = await browser.newContext();14  const page = await context.newPage();15  await page.dragAndDrop('#tsf > div:nth-child(2) > div.A8SBwf.emcav > div.RNNXgb > div > div.a4bIc > input', '#tsf > div:nth-child(2) > div.A8SBwf.emcav > div.RNNXgb > div > div.a4bIc > input');16  await page.screenshot({ path: `dragAndDrop.png` });17  await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21  const browser = await chromium.launch();22  const context = await browser.newContext();23  const page = await context.newPage();24  await page.drop('#tsf > div:nth-child(2) > div.A8SBwf.emcav > div.RNNXgb > div > div.a4bIc > input');25  await page.screenshot({ path: `drop.png` });26  await browser.close();27})();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.click('input[aria-label="Search"]');7  await page.keyboard.type('Playwright');8  await page.keyboard.press('Enter');9  await page.waitForSelector('text=Playwright: Node.js library to automate');10  await page.click('text=Playwright: Node.js library to automate');11  await page.waitForSelector('#search');12  await page.click('#search');13  await page.keyboard.type('drag');14  await page.keyboard.press('Enter');15  await page.waitForSelector('text=Drag and Drop');16  await page.click('text=Drag and Drop');17  await page.waitForSelector('text=Drag and Drop');18  await page.waitForSelector('#drag');19  const drag = await page.$('#drag');20  await drag.dragAndDrop({ x: 100, y: 100 });21  await browser.close();22})();23const { chromium } = require('playwright');24(async () => {25  const browser = await chromium.launch();26  const context = await browser.newContext();27  const page = await context.newPage();28  await page.click('input[aria-label="Search"]');29  await page.keyboard.type('Playwright');30  await page.keyboard.press('Enter');31  await page.waitForSelector('text=Playwright: Node.js library to automate');32  await page.click('text=Playwright: Node.js library to automate');33  await page.waitForSelector('#search');34  await page.click('#search');35  await page.keyboard.type('drag');36  await page.keyboard.press('Enter');37  await page.waitForSelector('text=Drag and Drop');38  await page.click('text=Drag and Drop');39  await page.waitForSelector('text=Drag and Drop');40  await page.waitForSelector('#drag');41  const drag = await page.$('#drag');42  await drag.dragAndDrop({ x: 100, y: 100 });43  await browser.close();44})();45const { chromium } = require('playwright');46(async () => {47  const browser = await chromium.launch();48  const context = await browser.newContext();

Using AI Code Generation

1const {chromium} = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.drag('#drag', 100, 100);7  await page.screenshot({ path: 'drag.png' });8  await browser.close();9})();

Using AI Code Generation

1const {chromium} = require('playwright');2(async() => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.drag('#tsf > div:nth-child(2) > div > div.FPdoLc.VlcLAe > center > input[type="submit"]:nth-child(1)', {delay: 1000, steps: 10});7  await page.screenshot({path: 'screenshot.png'});8  await browser.close();9})();10const {chromium} = require('playwright');11(async() => {12  const browser = await chromium.launch();13  const context = await browser.newContext();14  const page = await context.newPage();15  await page.dragAndDrop('#tsf > div:nth-child(2) > div > div.FPdoLc.VlcLAe > center > input[type="submit"]:nth-child(1)', {delay: 1000, steps: 10});16  await page.screenshot({path: 'screenshot.png'});17  await browser.close();18})();

Using AI Code Generation

1const { devices } = require('playwright');2const iPhone = devices['iPhone 6'];3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext({ ...iPhone });6  const page = await context.newPage();7  await page.drag('#gbqfbb', { steps: 5 });8  await page.screenshot({ path: 'drag.png' });9  await browser.close();10})();11const { devices } = require('playwright');12const iPhone = devices['iPhone 6'];13(async () => {14  const browser = await chromium.launch();15  const context = await browser.newContext({ ...iPhone });16  const page = await context.newPage();17  await page.dragAndDrop('#gbqfbb', { steps: 5 });18  await page.screenshot({ path: 'dragAndDrop.png' });19  await browser.close();20})();21const { devices } = require('playwright');22const iPhone = devices['iPhone 6'];23(async () => {24  const browser = await chromium.launch();25  const context = await browser.newContext({ ...iPhone });26  const page = await context.newPage();27  await page.$eval('input[name="q"]', (el) => el.value = 'Hello World');28  await page.screenshot({ path: 'hello-world.png' });29  await browser.close();30})();31const { devices } = require('playwright');32const iPhone = devices['iPhone 6'];33(async () => {

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const page = await browser.newPage();5  const source = await page.$('input[name="q"]');6  const target = await page.$('input[name="btnK"]');7  await source.dragAndDrop(target);8  await browser.close();9})();

Using AI Code Generation

1const { dragAndDrop } = require('playwright-internal');2const { chromium } = require('playwright');3(async () => {4  const browser = await chromium.launch({ headless: false });5  const context = await browser.newContext();6  const page = await context.newPage();7  const aHandle = await page.$('#column-a');8  const bHandle = await page.$('#column-b');9  await dragAndDrop(page, aHandle, bHandle);10  await page.screenshot({ path: `drag.png` });11  await browser.close();12})();

Using AI Code Generation

1const { drag } = require('@playwright/test');2await drag('#source', { steps: 10, by: { x: 100, y: 100 } });3await drag('#source', { steps: 10, to: '#target' });4await drag('#source', { steps: 10, by: { x: 100, y: 100 }, modifiers: ['Shift'] });5await drag('#source', { steps: 10, by: { x: 100, y: 100 }, modifiers: ['Shift'], delay: 1000 });6await drag('#source', { steps: 10, by: { x: 100, y: 100 }, modifiers: ['Shift'], delay: 1000, button: 'left' });7await drag('#source', { steps: 10, by: { x: 100, y: 100 }, modifiers: ['Shift'], delay: 1000, button: 'left', position: 'center' });8await drag('#source', { steps: 10, by: { x: 100, y: 100 }, modifiers: ['Shift'], delay: 1000, button: 'left', position: 'topLeft' });9await drag('#source', { steps: 10, by: { x: 100, y: 100 }, modifiers: ['Shift'], delay: 1000, button: 'left', position: 'topRight' });10await drag('#source', { steps: 10, by: { x: 100, y: 100 }, modifiers: ['Shift'], delay: 1000, button: 'left', position: 'bottomLeft' });11await drag('#source', { steps: 10, by: { x: 100, y: 100 }, modifiers: ['Shift'], delay:

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.