Tablesorter + Drag Columns

**ticroch** · 13/12/2012, 09h15

Bonjour,

j'aimerais combiner le plugin Tablesorter avec un plugin permettant de faire un Drag&Drop pour deplacer les columns.
J'ai essayé avec le plugin Dragtable, malheureusement les 2 ne passent pas ensemble..

Est-ce-que quelqu'un aurait une solution rapide pour faire ca ?

Merci d'avance,
cordialement

**SylvainPV** · 13/12/2012, 19h05

Combiner deux plug-ins, c'est mission impossible. Chacun a son propre mode de fonctionnement.

Il faut faire ta propre version du plug-in ou en choisir un autre. Essaie toujours de demander à l'auteur du plug-in, peut-être qu'il implémentera la fonctionnalité.

**ticroch** · 13/12/2012, 22h37

ba au final j'ai combiné les 2 en modifiant légèrement le code de dragTable.

j'ai fait que le drag&drop se declanche apres un timeout, ce qui fait que quand l'utilisateur clique brievement sur un header, ca trie, s'il reste un peu plus longtemps ca enclenche le drag&drop

si ca interesse quelqu'un je veux bien donner mes modifications !

**SylvainPV** · 13/12/2012, 23h18

Ah ben bravo

Oui n'hésites pas à poster ton code, ça sera peut-être utile pour certains visiteurs
C'est vrai que le premier problème auquel j'ai pensé c'est l'action sur les headers de colonne. Par contre tu arrives à persister l'ordre ?

**ticroch** · 14/12/2012, 07h46

c'est pas forcément le plus propre, parce que la methode setTimeout ne s'utilise que avec un String, donc j'ai été obligé de sauvegarder plusieurs objets à l'intérieur même du plugin.
Si quelqu'un a une solution plus "propre" je suis preneur
Avant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
		_create: function() {
 
			//console.log(this);
			//used start/end of drag
			this.startIndex = null;
			this.endIndex = null;
			this.currentColumnCollection = [];//the refferences to the table cells that are getting dragged
 
			//used on drag event to detect what direction the mouse is moving
			//init on drag start
			this.prevMouseX = 0;
 
			var self = this,
				o = self.options,
				el = self.element;
//grab the ths and the handles and bind them 
			el.delegate(o.items, 'mousedown.' + self.widgetEventPrefix, function(e){
				var $handle = $(this),
					//position the drag dispaly to rel to the middle of the target co
					offsetLeft = this.offsetLeft;
 
				//make sure we are working with a th instead of a handle
				if( $handle.hasClass( o.handle ) ){
 
					$handle = $handle.closest('th');
					offsetLeft = $handle[0].offsetLeft;
					self._positionOffset = e.pageX + offsetLeft;
 
					//console.log( 'handle was clicked using th', $handle, offsetLeft)
				}
 
				var $dragDisplay = self.getCol( $handle.index() );	
				self._positionOffset = e.pageX - offsetLeft;
 
				//console.log( $handle.width(), $handle[0] )
				var half = self.currentColumnCollection[0].clientWidth / 2,
					parentOffset = self._findElementPosition(el.parent()[0]);
 
					//figure out the width of the display and the top left of it
 
               	//console.log( 'offsetLeft',offsetLeft, ' e.x',e.pageX );
 
				$dragDisplay
					.attr( 'tabindex', -1 )
	                .focus()
					.disableSelection()
					.css({
	                    top: el[0].offsetTop,
	                   //using the parentOff.set makes e.pageX reletive to the parent element. This fixes the issue of the drag display not showing up under cursor on drag.
	                    //left: ((e.pageX - parentOffset.x) + (parseInt('-' + half)))
	                    left: offsetLeft
					})
	                .insertAfter( self.element )
 
				//get the colum count
				var colCount = self.element[ 0 ]
									.getElementsByTagName( 'thead' )[ 0 ]
									.getElementsByTagName( 'tr' )[ 0 ]
									.getElementsByTagName( 'th' )
									.length - 1;
 
				//console.log( 'col count', colCount );
 
                //drag the column around
 
                //TODO: make col switching relitvte to the silibing cols, not pageX
                self.prevMouseX = offsetLeft;
 
                	//console.log(dragDisplay)
                //TODO: dep
				self._eventHelper('displayHelper', e ,{
					'draggable': $dragDisplay
				});
 
				self._eventHelper('start',e,{
					'draggable': $dragDisplay
				});
 
                $( document )
	                .disableSelection()
	                .css( 'cursor', 'move')
	                .bind('mousemove.' + self.widgetEventPrefix, function( e ){
 
 
                    var columnPos = self._findElementPosition(self.currentColumnCollection[0]),
						colHalfWidth = Math.floor( self.currentColumnCollection[0].clientWidth / 2 );
 
 
                    //console.log( $dragDisplay.css('left'),'e.pageX ',e.pageX,'postion offset ', self._positionOffset, 'colpos.x ', columnPos.x)
 
                    //console.log( 'half width colHalfWidth ', colHalfWidth)
                    $dragDisplay
                    	.css( 'left', ( e.pageX - self._positionOffset ) )
 
                    if(e.pageX < self.prevMouseX){
                    	//move left
							var threshold = columnPos.x - colHalfWidth;
 
							//console.log( 'threshold ',threshold,  e.pageX - self._positionOffset )
							if(e.pageX - self._positionOffset < threshold ){
 
								self._swapCol(self.startIndex-1);
								self._eventHelper('change',e);
							}
 
						}else{
							//move right
							var threshold = columnPos.x + colHalfWidth * 2;
							//console.log('move right ', columnPos.x, threshold, e.pageX );
							//move to the right only if x is greater than threshold and the current col isn' the last one
							if(e.pageX > threshold  && colCount != self.startIndex ){
								//console.info('move right');
								self._swapCol( self.startIndex + 1 );
								self._eventHelper('change',e);
							}
						}
						//update mouse position
						self.prevMouseX = e.pageX;
 
                })
                .one( 'mouseup.dragtable',function(){
                    $( document )
	                    .css({
	                        cursor: 'auto'
	                    })
	                    .enableSelection()
	                    .unbind( 'mousemove.' + self.widgetEventPrefix );
 
                    self._dropCol($dragDisplay);
                    self.prevMouseX = 0;
 
                    self._eventHelper('stop',e);
                });
 
 
				//############
			});

Après (en gras les 10 ligne que j'ai rajouté)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
_create: function() {
			
			//console.log(this);
			//used start/end of drag
			this.startIndex = null;
			this.endIndex = null;
			this.currentColumnCollection = [];//the refferences to the table cells that are getting dragged
			
			//used on drag event to detect what direction the mouse is moving
			//init on drag start
			this.prevMouseX = 0;
			
			var self = this,
				o = self.options,
				el = self.element;
			
			//grab the ths and the handles and bind them 
			el.find(o.items).mousedown(function(e) {
				self.myDragEvent   = e;
				self.myDragElement = this;
				window.setTimeout("$('#myTablesorter').dragtable('makeEvent')",100);
				//############
			});

            $(document).mouseup(function() {
				self.myDragElement = null;
			});
		},
		myDragElement : null,
		myDragEvent : null,
		makeEvent: function() {
			if (this.myDragElement == null)		return;
			
			var e = this.myDragEvent;
			
			var self = this,
				o = self.options,
				el = self.element;
				//el.delegate(o.items, 'mousedown.' + self.widgetEventPrefix, function(e){
				var $handle = $(this.myDragElement),
					//position the drag dispaly to rel to the middle of the target co
					offsetLeft = this.myDragElement.offsetLeft;

				//make sure we are working with a th instead of a handle
				if( $handle.hasClass( o.handle ) ){
					
					$handle = $handle.closest('th');
					offsetLeft = $handle[0].offsetLeft;
					self._positionOffset = e.pageX + offsetLeft;

					//console.log( 'handle was clicked using th', $handle, offsetLeft)
				}
				
				var $dragDisplay = self.getCol( $handle.index() );	
				self._positionOffset = e.pageX - offsetLeft;
			
				//console.log( $handle.width(), $handle[0] )
				var half = self.currentColumnCollection[0].clientWidth / 2,
					parentOffset = self._findElementPosition(el.parent()[0]);
					
					//figure out the width of the display and the top left of it
				
               	//console.log( 'offsetLeft',offsetLeft, ' e.x',e.pageX );
                
				$dragDisplay
					.attr( 'tabindex', -1 )
	                .focus()
					.disableSelection()
					.css({
	                    top: el[0].offsetTop,
	                   //using the parentOff.set makes e.pageX reletive to the parent element. This fixes the issue of the drag display not showing up under cursor on drag.
	                    //left: ((e.pageX - parentOffset.x) + (parseInt('-' + half)))
	                    left: offsetLeft
					})
	                .insertAfter( self.element )
				
				//get the colum count
				var colCount = self.element[ 0 ]
									.getElementsByTagName( 'thead' )[ 0 ]
									.getElementsByTagName( 'tr' )[ 0 ]
									.getElementsByTagName( 'th' )
									.length - 1;
				
				//console.log( 'col count', colCount );
				
                //drag the column around

                //TODO: make col switching relitvte to the silibing cols, not pageX
                self.prevMouseX = offsetLeft;
                
                	//console.log(dragDisplay)
                //TODO: dep
				self._eventHelper('displayHelper', e ,{
					'draggable': $dragDisplay
				});
				
				self._eventHelper('start',e,{
					'draggable': $dragDisplay
				});
                
                $( document )
	                .disableSelection()
	                .css( 'cursor', 'move')
	                .bind('mousemove.' + self.widgetEventPrefix, function( e ){
                    
                	
                    var columnPos = self._findElementPosition(self.currentColumnCollection[0]),
						colHalfWidth = Math.floor( self.currentColumnCollection[0].clientWidth / 2 );
                    
                    
                    //console.log( $dragDisplay.css('left'),'e.pageX ',e.pageX,'postion offset ', self._positionOffset, 'colpos.x ', columnPos.x)
                    
                    //console.log( 'half width colHalfWidth ', colHalfWidth)
                    $dragDisplay
                    	.css( 'left', ( e.pageX - self._positionOffset ) )
                    
                    if(e.pageX < self.prevMouseX){
                    	//move left
							var threshold = columnPos.x - colHalfWidth;
							
							//console.log( 'threshold ',threshold,  e.pageX - self._positionOffset )
							if(e.pageX - self._positionOffset < threshold ){
								
								self._swapCol(self.startIndex-1);
								self._eventHelper('change',e);
							}

						}else{
							//move right
							var threshold = columnPos.x + colHalfWidth * 2;
							//console.log('move right ', columnPos.x, threshold, e.pageX );
							//move to the right only if x is greater than threshold and the current col isn' the last one
							if(e.pageX > threshold  && colCount != self.startIndex ){
								//console.info('move right');
								self._swapCol( self.startIndex + 1 );
								self._eventHelper('change',e);
							}
						}
						//update mouse position
						self.prevMouseX = e.pageX;
			
                })
                .one( 'mouseup.dragtable',function(){
                    $( document )
	                    .css({
	                        cursor: 'auto'
	                    })
	                    .enableSelection()
	                    .unbind( 'mousemove.' + self.widgetEventPrefix );
                    
                    self._dropCol($dragDisplay);
                    self.prevMouseX = 0;
                    
                    self._eventHelper('stop',e);
                });
		},

**SpaceFrog** · 14/12/2012, 08h29

c'est pas une fonctionalité prévue avec JQGrid ou dataTable ?

**ticroch** · 14/12/2012, 08h37

je pense que oui, mais la j'avais pas le temps de me pencher sur l'utilisation de nouveau plugins, mon projet doit etre fini pour Noel ^^

**SpaceFrog** · 14/12/2012, 08h54

et en une semaine tu peux pas implémenter jqgrid ???

ils embauchent dans ta boite ?

**ticroch** · 14/12/2012, 09h01

ouais j'ai pas que des tables à faire, en plus après si je change de plugin il faut changer tous les scripts et adapter ca au design, galere quoi :p

ouais ils embauchent mais c'est pas en France ^^

**SpaceFrog** · 14/12/2012, 09h04

l'affaire de deux jours ^^
c'est ou ?

**ticroch** · 14/12/2012, 09h13

Nord de l'Allemagne, je pense pour 2 jours ca vaut pas le coup :p

Tablesorter + Drag Columns

jQuery

Discussions similaires

Partager

Partager