import 'package:mdl/mdl.dart';
import 'package:mdl/mdlobservable.dart';
@MdlComponentModel
class _Language {
    final String name;
    final String type;
    _Language(this.name, this.type);
}
class _Programming extends _Language {
    _Programming(final String name) : super(name,"programming");
}
class _Natural extends _Language {
    _Natural(final String name) : super(name,"natural");
}
@MdlComponentModel @di.Injectable()
class Application extends MaterialApplication {
    final _logger = new Logger('dnd.Application');
    final ObservableList<_Language> languages = new ObservableList<_Language>();
    final ObservableList<_Language> natural = new ObservableList<_Language>();
    final ObservableList<_Language> programming = new ObservableList<_Language>();
    Application() {
        languages.add(new _Natural("English"));
        languages.add(new _Natural("German"));
        languages.add(new _Natural("Italian"));
        languages.add(new _Natural("French"));
        languages.add(new _Natural("Spanish"));
        languages.add(new _Programming("CPP"));
        languages.add(new _Programming("Dart"));
        languages.add(new _Programming("Java"));
    }
    @override
    void run() {
    }
    void addToProgrammingLanguages(final _Language language) {
        if(language.type == "programming") {
            if(!programming.contains(language)) {
                programming.add(language);
            }
        }
    }
    void addToNaturalLanguages(final _Language language) {
        if(language.type == "natural") {
            if(!natural.contains(language)) {
                natural.add(language);
            }
        }
    }
    void moveToTrash(final _Language language) {
        if(language.type == "programming" && programming.contains(language)) {
            programming.remove(language);
        } else if(language.type == "natural" && natural.contains(language)) {
            natural.remove(language);
        }
    }
}
main() {
    final Logger _logger = new Logger('dnd.Main');
    registerMdl();
    registerMdlDND();
    componentFactory().rootContext(Application).run().then((final MaterialApplication application) {
        application.run();
    });
}
To use any MDL component, you must include the minified CSS file in the <head> section of the page:
More about theming...
<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" >
                     
                    <template>
                        <mdl-draggable class="language" consumes="language" drop-zone="{{language.type}}">
                            {{language.name}}
                        </mdl-draggable>
                    </template>
                     
                </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">
                         
                        <template>
                            <mdl-draggable class="language" consumes="language" drop-zone="trash">
                                {{language.name}}
                            </mdl-draggable>
                        </template>
                         
                    </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">
                         
                        <template>
                            <mdl-draggable class="language" consumes="language" drop-zone="trash">
                                {{language.name}}
                            </mdl-draggable>
                        </template>
                         
                    </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>

Remark

In the DND sample you can see the following HTML-Structure:

    <div class="danddcontainer">
        <div class="choose ">
                <mdl-repeat class="source langbox mdl-dnd__drag-container" 
                    for-each="language in languages">
                    ...
                </mdl-repeat>
        </div>
        <div class="accept">
            <div class="langbox">
                <mdl-dropzone class="natural" name="natural"
                              on-drop-success="addToNaturalLanguages(data)">
                    <mdl-repeat for-each="language in natural" class="mdl-dnd__drag-container">
                        ...
                    </mdl-repeat>
                </mdl-dropzone>
            </div>
        </div>
    </div>

The first mdl-repeat takes 'languages' from your Application - there is no surrounding component.
The second mdl-repeat is encapsulated in mdl-dropzone. You could assume that it takes natural from mdl-dropzone
(its surrounding component) - you are right with most components. No so with mdl-dropzone.

mdl-dropzone (its class MaterialDropZone) is not ScopeAware. Because of this mdl-repeat looks for the
next ScopeAware parent, can't find one and takes your Application as RootContext.