pip-webui/pip-webui-core/samples/behaviors/draggable_input.html

HTML5 UI for LOB applications

<md-card class="drag-scroll layout-column flex">
    <md-card-title>
        <md-card-title-text>
            <span class="md-headline">Example with scroll and input fields</span>
        </md-card-title-text>
    </md-card-title>

    <md-card-content class="m0 p0">
        <div class="drag-scroll-test" style="height: 700px">
            <div class="composite-item"
                 style="height: 140px"
                 pip-scroll-container="'.drag-scroll-test'"
                 ng-style="obj.color"
                 ng-repeat="obj in content track by obj.file_id"

                 pip-drop="true"
                 pip-drag="true"
                 pip-drag-data="obj"
                 pip-force-touch = "true"
                 pip-touch-delay="100"
                 pip-drop-success="onDropComplete($index, $data, $event)">

                <div style="text-align: center; padding-top:15px; height: 40px; background-color: #aaccaa" pip-drag-handle>
                    Draggable region
                </div>
                <div class="layout-row layout-align-start-center" style="padding: 8px;">
                    <div style="width:200px; margin-right: 16px;">
                        <md-checkbox ng-model="obj.checked"
                                     aria-label="COMPLETE"
                                     pip-cancel-drag="true">
                        </md-checkbox>
                        File_id: {{obj.file_id}}
                    </div>
                    <div class="flex">
                        <md-input-container md-no-float style="width:100%;" >
                            <textarea ng-model="obj.file_name"
                                      name="{{'text' + $index}}"
                                      aria-label="TEXT"
                                      pip-cancel-drag="true"
                                      placeholder="'Input name'">
                            </textarea>
                        </md-input-container>
                    </div>
                </div>
            </div>

        </div>
    </md-card-content>
    <md-card-actions class="m0 p0">

    </md-card-actions>
</md-card>