<div class="dragAndDrop-inner component-inner" role="region">
    {{> component this}}
    <div class="dragAndDrop-widget component-widget {{#unless _isEnabled}} disabled {{#if _isComplete}} complete submitted show-user-answer {{#if _isCorrect}}correct{{/if}} {{/if}} {{/unless}}">
        <div class="dragAndDrop-draggables-container">
            {{#each _draggableItems}}
            <div class="dragAndDrop-item-draggable-wrapper" style="width:{{../_defaultMaxWidth}}%; height:{{../_defaultHeight}}%;"
            id="{{@index}}">
                <a href="#" class="dragAndDrop-item-draggable component-item component-item-color item-{{@index}}" data-id="{{id}}">
                    <div class="dragAndDrop-item-icon dragAndDrop-correct-icon icon icon-tick"></div>
                    <div class="dragAndDrop-item-icon dragAndDrop-incorrect-icon icon icon-cross"></div>   
                    {{{body}}}
                </a>
            </div>
            {{/each}}
        </div>
        <div class="dragAndDrop-droppables-container">
            {{#each _droppableItems}}
            <div class="dragAndDrop-item-background" id="drop-{{@index}}">
                {{#if _graphic.src}}<img src="{{{_graphic.src}}}" class="graphic-item" />{{/if}}
                <div class="dragAndDrop-item-droppable {{!-- {{#unless ../_isEnabled}} {{#if _isCorrect}} correct{{else}} incorrect{{/if}} {{/unless}} --}}" style="max-width:{{../_droppableMaxWidth}}px; min-height:{{../_droppableHeight}}px; "  data-id="{{id}}">
                   {{!--  <div class= "item-title">{{{title}}}</div> --}}
                    <div class="txt">{{{body}}}</div>
                    <div class="drag-item"></div>
                </div>
            </div>
            {{/each}}
        </div>
        <div class="dragAndDrop-dummy display-none" style="max-width:{{_defaultMaxWidth}}%; height:{{_defaultHeight}}%;"></div>
    </div>
    <div class="buttons dragAndDrop-Btn">
    </div>
</div>
