IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Tablesorter + Drag Columns


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre expérimenté
    Inscrit en
    Décembre 2009
    Messages
    282
    Détails du profil
    Informations forums :
    Inscription : Décembre 2009
    Messages : 282
    Par défaut Tablesorter + Drag Columns
    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

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    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é.

  3. #3
    Membre expérimenté
    Inscrit en
    Décembre 2009
    Messages
    282
    Détails du profil
    Informations forums :
    Inscription : Décembre 2009
    Messages : 282
    Par défaut
    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 !

  4. #4
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    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 ?

  5. #5
    Membre expérimenté
    Inscrit en
    Décembre 2009
    Messages
    282
    Détails du profil
    Informations forums :
    Inscription : Décembre 2009
    Messages : 282
    Par défaut
    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);
                    });
    		},

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    c'est pas une fonctionalité prévue avec JQGrid ou dataTable ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. Drag and drop "de l'extérieur"
    Par Invité dans le forum C++Builder
    Réponses: 12
    Dernier message: 31/03/2020, 10h10
  2. jtable column dragging, invocation de setValueAt par qui ?
    Par CobolProgrammator dans le forum Composants
    Réponses: 2
    Dernier message: 25/09/2014, 09h47
  3. Drag n Drop datagrid columns
    Par pitbulle dans le forum ASP.NET
    Réponses: 2
    Dernier message: 12/02/2007, 10h10
  4. Comment faire un Drag&Drop vers Windows ?
    Par Lung dans le forum Composants VCL
    Réponses: 17
    Dernier message: 21/06/2004, 13h10
  5. curseur et drag&drop
    Par Pierrot dans le forum Langage
    Réponses: 4
    Dernier message: 25/09/2002, 19h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo