<div class="demo-preview-block"> <h2>Drag & Drop (experimental)</h2> <div class="danddcontainer"> <div class="choose "> <h6>Choose language</h6> <div mdl-repeat="language in languages" class="source langbox mdl-dnd__drag-container" > {{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}} <template> <mdl-draggable class="language" consumes="language" drop-zone="{{language.type}}"> {{language.name}} </mdl-draggable> </template> |= {{ }} =| {{! ----- Turn on mustache ---- }} </div> </div> <div class="accept"> <div class="langbox"> <h6>Programming languages</h6> <mdl-dropzone class="programming" name="programming" on-drop-success="addToProgrammingLanguages(data)"> <div mdl-repeat="language in programming" class="mdl-dnd__drag-container"> {{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}} <template> <mdl-draggable class="language" consumes="language" drop-zone="trash"> {{language.name}} </mdl-draggable> </template> |= {{ }} =| {{! ----- Turn on mustache ---- }} </div> </mdl-dropzone> </div> <div class="langbox"> <h6>Natural languages</h6> <mdl-dropzone class="natural" name="natural" on-drop-success="addToNaturalLanguages(data)"> <div mdl-repeat="language in natural" class="mdl-dnd__drag-container"> {{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}} <template> <mdl-draggable class="language" consumes="language" drop-zone="trash"> {{language.name}} </mdl-draggable> </template> |= {{ }} =| {{! ----- Turn on mustache ---- }} </div> </mdl-dropzone> </div> </div> <div class="trash"> <h6>Trash</h6> <mdl-dropzone class="trashbox" name="trash" on-drop-success="moveToTrash(data)"></mdl-dropzone> </div> </div> </div>