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

HTML5 UI for LOB applications

<div class="app-draggable">
	<ul class="draggable-objects">
		<li  ng-repeat="obj in draggableObjects" >
			<div pip-drag="true" pip-drag-data="obj" pip-scroll-container="'.pip-body'">
				{{obj.name}}
			</div>
		</li>
	</ul>

	<hr/>
	
	<div pip-drop="true" pip-drop-success="onDropComplete1($data,$event)">
		<span class="title">Drop area #1</span>

		<div ng-repeat="obj in droppedObjects1" pip-drag="true" pip-drag-data="obj"
				pip-drag-success="onDragSuccess1($data,$event)" pip-center-anchor="{{centerAnchor}}">
			{{obj.name}}
		</div>

	</div>

	<div pip-drop="true" pip-drop-success="onDropComplete2($data,$event)">
		<span class="title">Drop area #2</span>

		<div ng-repeat="obj in droppedObjects2" pip-drag="true" pip-drag-data="obj"
				pip-drag-success="onDragSuccess2($data,$event)" pip-center-anchor="{{centerAnchor}}">
			{{obj.name}}
		</div>

	</div>
</div>

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

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

				 ng-class="{'select-item': isNgClass(obj)}"

				 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)">

				<p>file_id: {{obj.file_id}}</p>
				<p>file_name: {{obj.file_name}}</p>
			</div>

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

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