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);
});
}, |
Partager