Skip to content

Commit 92bacff

Browse files
fatlinesofcodefatlinesofcode
committed
added drag start + stop for ng-drag
1 parent d31a7a3 commit 92bacff

File tree

2 files changed

+615
-419
lines changed

2 files changed

+615
-419
lines changed

‎examples-simle.html‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ngDraggable</title>
5+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
6+
<style>
7+
8+
* {
9+
-moz-box-sizing: border-box;
10+
-webkit-box-sizing: border-box;
11+
box-sizing: border-box;
12+
}
13+
14+
[ng-drag] {
15+
-moz-user-select: -moz-none;
16+
-khtml-user-select: none;
17+
-webkit-user-select: none;
18+
-ms-user-select: none;
19+
user-select: none;
20+
}
21+
22+
[ng-drag] {
23+
width: 100px;
24+
height: 100px;
25+
background: rgba(255, 0, 0, 0.5);
26+
color: white;
27+
text-align: center;
28+
padding-top: 40px;
29+
display: inline-block;
30+
margin: 0 10px;
31+
cursor: move;
32+
}
33+
34+
ul.draggable-objects:after {
35+
display: block;
36+
content: "";
37+
clear: both;
38+
}
39+
40+
.draggable-objects li {
41+
float: left;
42+
display: block;
43+
width: 120px;
44+
height: 100px;
45+
}
46+
47+
[ng-drag].drag-over {
48+
border: solid 1px red;
49+
}
50+
51+
[ng-drag].dragging {
52+
opacity: 0.5;
53+
}
54+
55+
[ng-drop] {
56+
background: rgba(0, 255, 0, 0.5);
57+
text-align: center;
58+
width: 600px;
59+
height: 200px;
60+
padding-top: 90px;
61+
display: block;
62+
margin: 20px auto;
63+
position: relative;
64+
}
65+
66+
[ng-drop].drag-enter {
67+
border: solid 5px red;
68+
}
69+
70+
[ng-drop] span.title {
71+
display: block;
72+
position: absolute;
73+
top: 50%;
74+
left: 50%;
75+
width: 200px;
76+
height: 20px;
77+
margin-left: -100px;
78+
margin-top: -10px;
79+
}
80+
81+
[ng-drop] div {
82+
position: relative;
83+
z-index: 2;
84+
}
85+
86+
</style>
87+
</head>
88+
<body ng-app="ExampleApp">
89+
90+
<div class="container" ng-controller="MainCtrl">
91+
92+
<div class="row">
93+
<h1>ngDraggable Example</h1>
94+
</div>
95+
96+
<ul class="draggable-objects">
97+
<li ng-if="true">
98+
<div ng-drag="true" ng-drag-data="{name:'test'}" data-allow-transform="true">TEST</div>
99+
</li>
100+
</ul>
101+
102+
<hr/>
103+
<div ng-drop="true" ng-drop-success="onDropComplete1($data,$event)">
104+
<span class="title">Drop area #1</span>
105+
106+
<div ng-repeat="obj in droppedObjects1" ng-drag="true" ng-drag-data="obj"
107+
ng-drag-success="onDragSuccess1($data,$event)" ng-center-anchor="{{centerAnchor}}">
108+
{{obj.name}}
109+
</div>
110+
111+
</div>
112+
113+
<div ng-drop="true" ng-drop-success="onDropComplete2($data,$event)">
114+
<span class="title">Drop area #2</span>
115+
116+
<div ng-repeat="obj in droppedObjects2" ng-drag="true" ng-drag-data="obj"
117+
ng-drag-success="onDragSuccess2($data,$event)" ng-center-anchor="{{centerAnchor}}">
118+
{{obj.name}}
119+
</div>
120+
121+
</div>
122+
123+
<hr>
124+
125+
126+
</div>
127+
<footer style="margin-top:2000px;">footer</footer>
128+
129+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
130+
<script src="ngDraggable.js"></script>
131+
<script>
132+
angular.module('ExampleApp', ['ngDraggable']).
133+
controller('MainCtrl', function ($scope) {
134+
$scope.centerAnchor = true;
135+
$scope.toggleCenterAnchor = function () {
136+
$scope.centerAnchor = !$scope.centerAnchor
137+
}
138+
//$scope.draggableObjects = [{name:'one'}, {name:'two'}, {name:'three'}];
139+
140+
var onDraggableEvent = function (evt, data) {
141+
console.log("128", "onDraggableEvent", evt, data);
142+
}
143+
$scope.$on('draggable:start', onDraggableEvent);
144+
// $scope.$on('draggable:move', onDraggableEvent);
145+
$scope.$on('draggable:end', onDraggableEvent);
146+
$scope.droppedObjects1 = [];
147+
$scope.droppedObjects2 = [];
148+
$scope.onDropComplete1 = function (data, evt) {
149+
console.log("127", "$scope", "onDropComplete1", data, evt);
150+
var index = $scope.droppedObjects1.indexOf(data);
151+
if (index == -1)
152+
$scope.droppedObjects1.push(data);
153+
}
154+
$scope.onDragSuccess1 = function (data, evt) {
155+
console.log("133", "$scope", "onDragSuccess1", "", evt);
156+
var index = $scope.droppedObjects1.indexOf(data);
157+
if (index > -1) {
158+
$scope.droppedObjects1.splice(index, 1);
159+
}
160+
}
161+
$scope.onDragSuccess2 = function (data, evt) {
162+
var index = $scope.droppedObjects2.indexOf(data);
163+
if (index > -1) {
164+
$scope.droppedObjects2.splice(index, 1);
165+
}
166+
}
167+
$scope.onDropComplete2 = function (data, evt) {
168+
var index = $scope.droppedObjects2.indexOf(data);
169+
if (index == -1) {
170+
$scope.droppedObjects2.push(data);
171+
}
172+
}
173+
var inArray = function (array, obj) {
174+
var index = array.indexOf(obj);
175+
}
176+
});
177+
</script>
178+
</body>
179+
</html>

0 commit comments

Comments
 (0)