The basic CTATDragNDrop component is designed to support bucket-sorting style tasks. Generally, you will use two or more CTATDragNDrop components to provide this basic interaction. For example, in the initial state a bunch of objects will be in a source CTATDragNDrop and the user is asked to drag items into destination buckets (more CTATDragNDrop components) based on some criteria. CTATDragNDrop instances will only accept dropped items from other CTATDragNDrop instances if they share the same name attribute value (the Group Name property in the CTAT HTML Editor). To make items draggable between two instances of CTATDragNDrop, give both instances the same group name.

A CTATDragNDrop can contain CTAT components, non-CTAT components, or both; when CTAT components are used, they should be untutored and configured so as to be non-interactive. Just about any non-interactive HTML entity can be used as a child of the CTATDragNDrop. In the first example below, dndcircle, dndtext, and dndimg are the children that users can drag to another CTATDragNDrop component with a name="dndGroup1" attribute.

To add items to a CTATDragNDrop, simply add them as child entities; in the CTAT HTML editor, drag components into your source Drag-N-Drop to make them child entities. All child entities of the CTATDragNDrop should have an id attribute, as the ids are used to indicate to the CTAT tracer which items were dropped into the destination CTATDragNDrop.

Example using non-CTAT component items contained by a CTATDragNDrop:

<div id="source" class="CTATDragNDrop" name="dndGroup1">
  <div id="dndcircle" style="width:48px;height:48px;">
    <svg width="48" height="48">
       <circle cx="24" cy="24" r="20" stroke="darkblue"
              fill="blue" stroke-width="2px"/>
    </svg>
  </div>
  <div id="dndtext">Square</div>
  <img id="dndimg" src="CTAT-icon.svg"/>
  <!-- Additional non-interactive items -->
</div>

Example using CTATTextField component items contained by a CTATDragNDrop with a destination CTATDragNDrop and CTATSubmitButton. Note that both drag-n-drops and the items contained by the first drag-n-drop are all set to be un-tutored. The Submit button is used to evaluate the items in the second drag-n-drop (data-ctat-target="dndTarget"):

<div id="dndSource" class="CTATDragNDrop" name="dndGroup2" data-ctat-tutor="false">
 <div id="item1" class="CTATTextField" data-ctat-tutor="false">red</div>
 <div id="item2" class="CTATTextField" data-ctat-tutor="false">yellow</div>
 <div id="item3" class="CTATTextField" data-ctat-tutor="false">green</div>
</div>
<div id="dndTarget" class="CTATDragNDrop" name="dndGroup2" data-ctat-tutor="false">
</div>
<div id="dndSubmit" class="CTATSubmitButton" data-ctat-target="dndTarget" data-ctat-tutor="true">Submit</div>

In this example, the user is asked to put the blue circle into the sink bucket. CTATDragNDrop Example

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATDragNDrop and no other CTAT<component> classes.
• name: Optional, but recomended CTATDragNDrops will reject drops unless the origin CTATDragNDrop has the same name attribute.
• data-ctat-enabled: true or false. Default is true. Controls if the component will accept student interaction.
• data-ctat-tutor: true or false. Default is true. Controls if direct actions on the component trigger grading.
• data-ctat-show-feedback: true or false. Default is true unless data-ctat-tutor="false". Determines if grading feedback is shown on the component.
• data-ctat-show-hint-highlight: true or false. Default is true. Determines if hint highlighting is shown on the component.
• data-ctat-disable-on-correct: true or false. Default is true. Determines if the component becomes locked when it is graded as correct.
• data-ctat-max-cardinality: An integer. Default is infinity. If this component contains this number or more children, then it will reject any attempts to drop more objects into it.

In addition to the common Actions listed in Often Used TPAs this component supports the following actions:

When CTATDragNDrop is configured with data-ctat-tutor="true", it will emit a SAI every time an item is dropped into it where the Action is Add and the Input is the id of the item dropped.

When a CTATSubmitButton is used with a CTATDragNDrop, it will emit a SAI where the action is SetChildren and the Input is the list of the ids of the children sorted into alphabetical order.

.CTATDragNDrop { /* Basic DragNDrop box look */
	border: 1px solid grey;
	border-radius: 5px;
}
.CTATDragNDrop--valid-drop { /* Added when the CTATDragNDrop is a valid drop */
	border: 1px dashed blue;
}
.CTATDragNDrop--item {} /* styling to apply to all dragable items */

Example for mass producing CTATTextField component items contained by a CTATDragNDrop:

<div id="dndSource" class="CTATDragNDrop" data-ctat-tutor="false" tabindex="4" style="width: 100px; height:150px;>
 <div id="item1" class="CTATTextField" data-ctat-tutor="false"
      style="background-color: lightblue; width:50px;">%(dnd-op1)%</div>
 <div id="item2" class="CTATTextField" data-ctat-tutor="false"
      style="background-color: yellow; width:50px;">%(dnd-op2)%</div>
 <div id="item3" class="CTATTextField" data-ctat-tutor="false"
      style="background-color: lightgreen; width:50px;">%(dnd-op3)%</div>
 <div id="item4" class="CTATTextField" data-ctat-tutor="false"
      style="background-color: pink; width:50px;">%(dnd-op4)%</div>
</div>