DragDrop element

description

Allows dragging elements into the specific space.

syntax

newDragDrop(ELEMENT_NAME: string)
  • ELEMENT_NAME: The name of the newly-created element.

since

beta 2.0

example(s) 


@newDragDrop("dd", "bungee")
@        .log()
@        .addDrop( getCanvas("listOfWords") , getCanvas("gap-0") , getCanvas("gap-1") )
@        .addDrag( getText("sentence") , getText("illustrate") , getText("dummy") )
@        .swap( getCanvas("gap-0"), getCanvas("gap-1") )
@        .offset('0.5em','0em', getCanvas("gap-0"), getCanvas("gap-1"))
@        .wait(
@            self.test.dropped(getCanvas("gap-0"),getCanvas("gap-1"))
@        )
+ Creates gap-0 and gap-1 into which words have to be dropped from the displayed list.

Action commands

dragdrop.addDrag

syntax

.addDrag()

description

Adding a feature to the element to be draggable.

example

click to expand 

@newDragDrop("dd", "bungee")
@        .log()
@        .addDrop( getCanvas("listOfWords") , getCanvas("gap-0") , getCanvas("gap-1") )
$        .addDrag( getText("sentence") , getText("illustrate") , getText("dummy") )
@        .swap( getCanvas("gap-0"), getCanvas("gap-1") )
@        .offset('0.5em','0em', getCanvas("gap-0"), getCanvas("gap-1"))
@        .wait(
@            self.test.dropped(getCanvas("gap-0"),getCanvas("gap-1"))
@        )
  • Adding draggable feature to the text with the ID of “sentence”.
↑ back to top

dragdrop.addDrop

syntax

.addDrop()

description

Adding a feature to the element to be droppable.

example

click to expand 

@newDragDrop("dd", "bungee")
@        .log()
$        .addDrop( getCanvas("listOfWords") , getCanvas("gap-0") , getCanvas("gap-1") )
@        .addDrag( getText("sentence") , getText("illustrate") , getText("dummy") )
@        .swap( getCanvas("gap-0"), getCanvas("gap-1") )
@        .offset('0.5em','0em', getCanvas("gap-0"), getCanvas("gap-1"))
@        .wait(
@            self.test.dropped(getCanvas("gap-0"),getCanvas("gap-1"))
@        )
  • Adding droppable feature to the canvas “listOfWords”.
↑ back to top

dragdrop.bungee

syntax

.bungee()

description

If an element is dropped outside a drop area, it will go back to its original position.

example

click to expand 

$newDragDrop("dd", "bungee")
@        .log()
@        .addDrop( getCanvas("listOfWords") , getCanvas("gap-0") , getCanvas("gap-1") )
@        .addDrag( getText("sentence") , getText("illustrate") , getText("dummy") )
@        .swap( getCanvas("gap-0"), getCanvas("gap-1") )
@        .offset('0.5em','0em', getCanvas("gap-0"), getCanvas("gap-1"))
@        .wait(
@            self.test.dropped(getCanvas("gap-0"),getCanvas("gap-1"))
@        )
$getDragDrop("dd").bungee()
  • If a word is dropped outside a drop area, it will go back to its original position.
↑ back to top

dragdrop.callback

syntax

.callback()

description

The commands passed to callback will be run whenever an element is (successfully) dropped.

example

click to expand 

@newDragDrop("dd", "bungee", "swap")
@        .addDrag(getCanvas("dot"),getCanvas("otherdot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
@        .offset(0, getCanvas("start"))
@        .offset(50, getCanvas("end"))
@        .drop(getCanvas('dot'),getCanvas('start')) // start dropped by default
$        .callback(
$            newText("feedback","Good job! Now make sure that Red is on Start and Blue is on End")
$                .css("background-color","lightgray")
$                .print("center at 50vw", "middle at 50vh")
$            ,
$            newTimer(3000).start().wait()
$            ,
$            getText("feedback").remove()
$        )
@        .log("all") // Log every drag event and every drop event
@        .wait()
  • If the element is successfully dropped, the callback will execute the command and print the feedback to the screen.
↑ back to top

dragdrop.drop

syntax

.addDrag()

description

Simulates a drop of element onto the another element

example

click to expand 

@ newDragDrop("dd", "bungee", "swap")
@        .addDrag(getCanvas("dot"),getCanvas("otherdot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
@        .offset(0, getCanvas("start"))
@        .offset(50, getCanvas("end"))
$        .drop(getCanvas('dot'),getCanvas('start')) // start dropped by default
@        .callback(
@            newText("feedback","Good job! Now make sure that Red is on Start and Blue is on End")
@                .css("background-color","lightgray")
@                .print("center at 50vw", "middle at 50vh")
@            ,
@            newTimer(3000).start().wait()
@            ,
@            getText("feedback").remove()
@        )
  • Simulates a drop of the canvas ‘dot’ onto the canvas ‘start’.
↑ back to top

dragdrop.log

syntax

.log()

description

Will log the time/results of the action to your results file.

example

click to expand 

@    newDragDrop("dd", "bungee", "swap")
@        .addDrag(getCanvas("dot"),getCanvas("otherdot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
@        .offset(0, getCanvas("start"))
@        .offset(50, getCanvas("end"))
@        .drop(getCanvas('dot'),getCanvas('start')) // start dropped by default
@        .callback(
@            newText("feedback","Good job! Now make sure that Red is on Start and Blue is on End")
@                .css("background-color","lightgray")
@                .print("center at 50vw", "middle at 50vh")
@            ,
@           newTimer(3000).start().wait()
@            ,
@            getText("feedback").remove()
@        )
$        .log("all") 
@        .wait()
  • In this case, log command logs every drag event and every drop event.
↑ back to top

dragdrop.removeDrag

syntax

.removeDrag()

description

Makes the specified elements no longer draggable.

example

click to expand 

@    newDragDrop("dd", "bungee", "swap")
@        .addDrag(getCanvas("dot"),getCanvas("otherdot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
$        .removeDrag(getCanvas("dot"),getCanvas("otherdot"))
@        .offset(0, getCanvas("start"))
@        .offset(50, getCanvas("end"))
@        .drop(getCanvas('dot'),getCanvas('start')) 
@        .callback(
@            newText("feedback","Good job! Now make sure that Red is on Start and Blue is on End")
@                .css("background-color","lightgray")
@               .print("center at 50vw", "middle at 50vh")
@           ,
@            newTimer(3000).start().wait()
@            ,
@            getText("feedback").remove()
@        )
  • Makes canvas “dot” no longer draggable.
↑ back to top

dragdrop.removeDrop

syntax

.removeDrop()

description

No longer marks the specified elements as dropzones.

example

click to expand 

@newDragDrop("dd", "bungee", "swap")
@        .addDrag(getCanvas("dot"),getCanvas("otherdot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
$        .removeDrop(getCanvas("start"),getCanvas("end"))
@        .offset(0, getCanvas("start"))
@        .offset(50, getCanvas("end"))
@        .drop(getCanvas('dot'),getCanvas('start')) 
@        .callback(
@            newText("feedback","Good job! Now make sure that Red is on Start and Blue is on End")
@                .css("background-color","lightgray")
@                .print("center at 50vw", "middle at 50vh")
@            ,
@            newTimer(3000).start().wait()
@            ,
@            getText("feedback").remove()
@        )
  • Area surrounded by canvas “start” and canvas “end” is no longer a dropzone.
↑ back to top

dragdrop.single

syntax

.single()

description

Allows only one element per dropzone at a time.

example

click to expand 

@    newDragDrop("dd")
@        .addDrag(getCanvas("dot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
@        .offset(25) 
$        .single()
@        .log()
@        .wait()
  • Will allow only one element on each canvas dropzone at the time.
↑ back to top

dragdrop.swap

syntax

.swap()

description

Will swap elements if dropping one onto an occupied dropzone.

example

click to expand 

@ newDragDrop("words", "bungee")
@        .addDrag(getText("hello"),getText("world"),getText("bye"),getText("earth"))
@        .addDrop(getCanvas("word1"),getCanvas("word2"),getCanvas("word3"),getCanvas("word4"),getCanvas("reservoir"))
$        .swap(getCanvas("word1"),getCanvas("word2"),getCanvas("word3"),getCanvas("word4"))
@        .offset('0.5em')
@        .offset('unset', getCanvas("reservoir"))
@        .wait( 
@            self.test.dropped(getCanvas("word1"),getCanvas("word2"),getText("hello"),getCanvas("word4"))
@        )
  • It will swap elements word1, word2, word3, and word4 if dropping one onto an occupied dropzone.
↑ back to top

dragdrop.wait

syntax

.wait()

description

Pauses the script’s execution until one element is dragged and dropped onto a dropzone.

example

click to expand 

@    newDragDrop("dd")
@        .addDrag(getCanvas("dot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
@        .offset(25) 
@        .single()
@        .log()
$        .wait()
  • Pauses the script’s execution until element “dot” is dragged and dropped onto a dropzone.
↑ back to top

Test commands

dragdrop.test.dropped

syntax

.test.dropped()

description

Tests whether any element, or the specified ones, have been dragged and/or dropped.

example

click to expand 

@    newDragDrop("dd", "bungee")
@        .log()
@        .addDrop( getCanvas("listOfWords") , getCanvas("gap-0") , getCanvas("gap-1") )
@        .addDrag( getText("sentence") , getText("illustrate") , getText("dummy") )
@        .swap( getCanvas("gap-0"), getCanvas("gap-1") )
@        .offset('0.5em','0em', getCanvas("gap-0"), getCanvas("gap-1"))
@        .wait(
$            self.test.dropped(getCanvas("gap-0"),getCanvas("gap-1"))
@        )
  • Tests wheter gap-0 and gap-1 have words dropped on them/
  • Script waits for the further execution until both gap-0 and gap-1 have been droppped a word onto them.
↑ back to top

Table of contents