@@ -50,6 +50,11 @@ define([
5050 defaults : {
5151 rootSelector : '${ $.recordsProvider }:div.admin__field' ,
5252 tableSelector : '${ $.rootSelector } -> table.admin__dynamic-rows' ,
53+ separatorsClass : {
54+ top : '_dragover-top' ,
55+ bottom : '_dragover-bottom'
56+ } ,
57+ step : 'auto' ,
5358 recordsCache : [ ] ,
5459 draggableElement : { } ,
5560 draggableElementClass : '_dragged' ,
@@ -115,22 +120,21 @@ define([
115120 */
116121 mousedownHandler : function ( data , elem , event ) {
117122 var recordNode = this . getRecordNode ( elem ) ,
118- originRecord = $ ( elem ) . parents ( 'tr' ) ;
123+ originRecord = $ ( elem ) . parents ( 'tr' ) ,
124+ drEl = this . draggableElement ;
119125
120126 $ ( recordNode ) . addClass ( this . draggableElementClass ) ;
121127 $ ( originRecord ) . addClass ( this . draggableElementClass ) ;
122- this . draggableElement . originRow = originRecord ;
123- this . draggableElement . instance = recordNode = this . processingStyles ( recordNode , elem ) ;
124- this . draggableElement . instanceCtx = this . getRecord ( originRecord [ 0 ] ) ;
125- this . draggableElement . eventMousedownY = event . pageY ;
126- this . draggableElement . minYpos =
128+ this . step = this . step === 'auto' ? originRecord . height ( ) / 2 : this . step ;
129+ drEl . originRow = originRecord ;
130+ drEl . instance = recordNode = this . processingStyles ( recordNode , elem ) ;
131+ drEl . instanceCtx = this . getRecord ( originRecord [ 0 ] ) ;
132+ drEl . eventMousedownY = event . pageY ;
133+ drEl . minYpos =
127134 this . table . offset ( ) . top - originRecord . offset ( ) . top +
128135 this . table . outerHeight ( ) - this . table . find ( 'tbody' ) . outerHeight ( ) ;
129- this . draggableElement . maxYpos =
130- this . draggableElement . minYpos +
131- this . table . find ( 'tbody' ) . outerHeight ( ) - originRecord . outerHeight ( ) ;
136+ drEl . maxYpos = drEl . minYpos + this . table . find ( 'tbody' ) . outerHeight ( ) - originRecord . outerHeight ( ) ;
132137 this . tableWrapper . append ( recordNode ) ;
133-
134138 this . body . bind ( 'mousemove' , this . mousemoveHandler ) ;
135139 this . body . bind ( 'mouseup' , this . mouseupHandler ) ;
136140 } ,
@@ -141,32 +145,51 @@ define([
141145 * @param {Object } event - mouse move event
142146 */
143147 mousemoveHandler : function ( event ) {
144- var positionY = event . pageY - this . draggableElement . eventMousedownY ,
148+ var depEl = this . draggableElement ,
149+ positionY = event . pageY - depEl . eventMousedownY ,
145150 processingPositionY = positionY + 'px' ,
146- processingMaxYpos = this . draggableElement . maxYpos + 'px' ,
147- processingMinYpos = this . draggableElement . minYpos + 'px' ;
148-
149- if ( positionY > this . draggableElement . minYpos && positionY < this . draggableElement . maxYpos ) {
150- $ ( this . draggableElement . instance ) [ 0 ] . style [ transformProp ] = 'translateY(' + processingPositionY + ')' ;
151- } else if ( positionY < this . draggableElement . minYpos ) {
152- $ ( this . draggableElement . instance ) [ 0 ] . style [ transformProp ] = 'translateY(' + processingMinYpos + ')' ;
153- } else if ( positionY >= this . draggableElement . maxYpos ) {
154- $ ( this . draggableElement . instance ) [ 0 ] . style [ transformProp ] = 'translateY(' + processingMaxYpos + ')' ;
151+ processingMaxYpos = depEl . maxYpos + 'px' ,
152+ processingMinYpos = depEl . minYpos + 'px' ,
153+ depElement = this . getDepElement ( depEl . instance , positionY ) ;
154+
155+ if ( depElement ) {
156+ depEl . depElement ? depEl . depElement . elem . removeClass ( depEl . depElement . className ) : false ;
157+ depEl . depElement = depElement ;
158+ depEl . depElement . insert !== 'none' ? depEl . depElement . elem . addClass ( depElement . className ) : false ;
159+ } else if ( depEl . depElement && depEl . depElement . insert !== 'none' ) {
160+ depEl . depElement . elem . removeClass ( depEl . depElement . className ) ;
161+ depEl . depElement . insert = 'none' ;
162+ }
163+
164+ if ( positionY > depEl . minYpos && positionY < depEl . maxYpos ) {
165+ $ ( depEl . instance ) [ 0 ] . style [ transformProp ] = 'translateY(' + processingPositionY + ')' ;
166+ } else if ( positionY < depEl . minYpos ) {
167+ $ ( depEl . instance ) [ 0 ] . style [ transformProp ] = 'translateY(' + processingMinYpos + ')' ;
168+ } else if ( positionY >= depEl . maxYpos ) {
169+ $ ( depEl . instance ) [ 0 ] . style [ transformProp ] = 'translateY(' + processingMaxYpos + ')' ;
155170 }
156171 } ,
157172
158173 /**
159174 * Mouse up handler
160175 */
161176 mouseupHandler : function ( ) {
162- var depElement = this . _getDepElement ( this . draggableElement . instance ) ,
163- depElementCtx = this . getRecord ( depElement [ 0 ] ) ;
177+ var depElementCtx ,
178+ drEl = this . draggableElement ;
179+
180+ if ( drEl . depElement ) {
181+ depElementCtx = this . getRecord ( drEl . depElement . elem [ 0 ] ) ;
182+ drEl . depElement . elem . removeClass ( drEl . depElement . className ) ;
164183
165- this . setPosition ( depElement , depElementCtx , this . draggableElement ) ;
166- this . draggableElement . originRow . removeClass ( this . draggableElementClass ) ;
184+ if ( drEl . depElement . insert !== 'none' ) {
185+ this . setPosition ( drEl . depElement . elem , depElementCtx , drEl ) ;
186+ }
187+ }
188+
189+ drEl . originRow . removeClass ( this . draggableElementClass ) ;
167190 this . body . unbind ( 'mousemove' , this . mousemoveHandler ) ;
168191 this . body . unbind ( 'mouseup' , this . mouseupHandler ) ;
169- this . draggableElement . instance . remove ( ) ;
192+ drEl . instance . remove ( ) ;
170193 this . draggableElement = { } ;
171194 } ,
172195
@@ -178,64 +201,69 @@ define([
178201 * @param {Object } dragData - data draggable element
179202 */
180203 setPosition : function ( depElem , depElementCtx , dragData ) {
181- var prevElem = depElem . prev ( ) ,
182- nextElem = depElem . next ( ) ,
183- depElemPosition = parseInt ( depElementCtx . position , 10 ) ,
184- prevElemCtx ,
185- prevElemPosition ;
186-
187- if ( prevElem [ 0 ] === dragData . originRow [ 0 ] ) {
188- dragData . instanceCtx . position = depElemPosition ;
189- depElementCtx . position = depElemPosition - 1 ;
190-
191- return false ;
192- }
204+ var depElemPosition = parseInt ( depElementCtx . position , 10 ) ;
193205
194- if ( ! prevElem . length ) {
195- depElemPosition = -- depElemPosition ? depElemPosition : 1 ;
206+ if ( dragData . depElement . insert === 'after' ) {
207+ dragData . instanceCtx . position = depElemPosition + 1 ;
208+ } else if ( dragData . depElement . insert === 'before' ) {
196209 dragData . instanceCtx . position = depElemPosition ;
197-
198- return false ;
199210 }
211+ } ,
200212
201- if ( ! nextElem . length ) {
202- depElemPosition = ++ depElemPosition ;
203- dragData . instanceCtx . position = depElemPosition ;
204-
205- return false ;
206- }
213+ /**
214+ * Get dependency element
215+ *
216+ * @param { Object } curInstance - current element instance
217+ * @param { Number } position
218+ */
207219
208- prevElemCtx = this . getRecord ( prevElem [ 0 ] ) ;
209- prevElemPosition = prevElemCtx . position ;
220+ getDepElement : function ( curInstance , position ) {
221+ var recordsCollection = this . table . find ( 'tbody > tr' ) ,
222+ curInstancePositionTop = $ ( curInstance ) . position ( ) . top ,
223+ curInstancePositionBottom = curInstancePositionTop + $ ( curInstance ) . height ( ) ;
210224
211- if ( prevElemPosition === depElemPosition - 1 ) {
212- dragData . instanceCtx . position = depElemPosition ;
213- } else {
214- dragData . instanceCtx . position = -- depElemPosition ;
225+ if ( position < 0 ) {
226+ return this . _getDepElement ( recordsCollection , 'before' , curInstancePositionTop ) ;
227+ } else if ( position > 0 ) {
228+ return this . _getDepElement ( recordsCollection , 'after' , curInstancePositionBottom ) ;
215229 }
216-
217230 } ,
218231
219232 /**
220- * Get dependency element
233+ * Get dependency element private
221234 *
222- * @param {Object } curInstance - current element instance
235+ * @param {Array } collection - record collection
236+ * @param {String } position - position to add
237+ * @param {Number } dragPosition - position drag element
223238 */
224- _getDepElement : function ( curInstance ) {
225- var recordsCollection = this . table . find ( 'tbody > tr' ) ,
226- curInstancePosition = $ ( curInstance ) . position ( ) . top ,
227- i = 0 ,
228- length = recordsCollection . length ,
229- result ,
239+ _getDepElement : function ( collection , position , dragPosition ) {
240+ var rec ,
241+ rangeEnd ,
230242 rangeStart ,
231- rangeEnd ;
243+ result ,
244+ className ,
245+ i = 0 ,
246+ length = collection . length ;
232247
233248 for ( i ; i < length ; i ++ ) {
234- rangeStart = recordsCollection . eq ( i ) . position ( ) . top ;
235- rangeEnd = rangeStart + recordsCollection . eq ( i ) . height ( ) ;
249+ rec = collection . eq ( i ) ;
250+
251+ if ( position === 'before' ) {
252+ rangeStart = collection . eq ( i ) . position ( ) . top ;
253+ rangeEnd = rangeStart + this . step ;
254+ className = this . separatorsClass . top ;
255+ } else if ( position === 'after' ) {
256+ rangeEnd = rec . position ( ) . top + rec . height ( ) ;
257+ rangeStart = rangeEnd - this . step ;
258+ className = this . separatorsClass . bottom ;
259+ }
236260
237- if ( curInstancePosition > rangeStart && curInstancePosition < rangeEnd ) {
238- result = recordsCollection . eq ( i ) ;
261+ if ( dragPosition > rangeStart && dragPosition < rangeEnd ) {
262+ result = {
263+ elem : rec ,
264+ insert : rec [ 0 ] === this . draggableElement . originRow [ 0 ] ? 'none' : position ,
265+ className : className
266+ } ;
239267 }
240268 }
241269
0 commit comments