The CTATDragSource component is designed to support bucket-sorting style tasks, building from and differing with CTATDragSource by allowing for the creation of clones when an element is dragged from the source div. Generally, you will use one CTATDragSource 'source' component, one or more CTATDragSource 'destination' components and optionally one CTATDragSource 'trashcan' component to provide this basic interaction.

Use the data-ctat-purpose attribute to specify if the CTATDragSource instance is 'source' where clones will be created, 'destination' or 'trashcan' where items will be deleted. CTATDragSource instances will only accept dropped items from other CTATDragSource instances if they share the same name attribute value (the Group Name property in the CTAT HTML Editor).

A CTATDragSource can contain CTAT components, non-CTAT components, or both. In the first example below, dndcircle, dndtext, and dndimg are the children that users can drag to another CTATDragSource component with a name="dndGroup1" attribute.

To add items to a CTATDragSource, simply add them as child entities. In the CTAT HTML editor, drag components into your source DragSource to make them child entities. All child entities of the CTATDragSource should have an id attribute, as the ids are used to indicate to the CTAT tracer which items were dropped into the destination CTATDragSource.

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

<div id="source" class="CTATDragSource" ctat-data-purpose="source" name="dsGroup1">
  <div id="dscircle" 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="dstext">Square</div>
  <img id="dsimg" src="CTAT-icon.svg"/>
  <!-- Additional non-interactive items -->
</div>

Example using CTATTextField component items contained by a CTATDragSource with a destination CTATDragSource and CTATSubmitButton. The Submit button is used to evaluate the items in the second drag-n-drop (data-ctat-target="dndTarget"):

<div id="dsSource" class="CTATDragSource" data-ctat-purpose="source" name="dsGroup2" 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="dsTarget" class="CTATDragSource" data-ctat-purpose="destination" name="dsGroup2" data-ctat-tutor="false">
</div>
<div id="dsTrashCan" class="CTATDragSource" data-ctat-purpose="trashcan" name="dsGroup2" data-ctat-tutor="false">
</div>
<div id="dsSubmit" class="CTATSubmitButton" data-ctat-target="dndTarget" data-ctat-tutor="true">Submit</div>

(live example will be up soon) 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 CTATDragSource and no other CTAT<component> classes.
• name: Optional, but recommended CTATDragSource instances will reject drops unless the origin CTATDragSource has the same name attribute.
• data-ctat-purpose: source, destination or trashcan. Default is destination. Source will create clones, trashcan will delete all elements dragged into it.
• 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-overflow: An integer. Default is infinity. If this component contains more than this number of children, then it will remove the first child.
• 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 CTATDragSource 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 CTATDragSource, 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.

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

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

<div id="dsSource" class="CTATDragSource" 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>