Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

modifications #1

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+189 −95
Open

modifications #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c42546d
Lots of changed lines (should've split it into a few commits, oh well…
aharpervc Apr 5, 2011
c7cebfc
* Added 3 options to allow customization of applied classes (defaults…
aharpervc Apr 6, 2011
3200e46
Recalculate offsetTop at the beginning of a drag, because it may chan…
aharpervc Apr 6, 2011
53d7eb7
Check to make sure sortableObject exists
aharpervc Apr 18, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions jquery.sort.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.sortable-active {
cursor: move;
}

.sortable-drag {
position: absolute;
border: 1px solid black;
background: white;
z-index: 1000;

-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
}

.sortable-drop {
opacity: 0.10;
}
265 changes: 170 additions & 95 deletions jquery.sort.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,118 +1,193 @@
(function( $ ){
$.fn.sortable = function(settings) {

var scrollParent;
var sortableObject = $(this);
var offsetTop = $(this).offset().top;

var sortComplete = function() {
$$.trigger("sort:complete");
};
(function ($) {
$.fn.sortable = function (settings) {

var scrollParent;
var sortableObject = $(this);

if (sortableObject.length === 0) {
return;
}

var offsetTop = sortableObject.offset().top;

var sortComplete = function () {
$$.trigger('sort:complete');
};

var log = function (msg, min_level) {
if (config.debugLevel >= min_level) {
console.log('[jquery.sort.js] ' + msg);
}
};

var config = {
scroll : true,
sortElement : 'li',
handle : '.handle',
scrollSensitivity : 40,
scrollSpeed : 20,
scrollParentClass : '.scrolling-el',
debugLevel : 0,

scroll : true,
sortElement : 'li',
handle : '.handle',
dragElementCenter : false,

scrollSensitivity : 40,
scrollSpeed : 20,
scrollParentClass : '.scrolling-el',

constrain : false,
constrainMarginTop : 0,
constrainMarginBottom : 0,

ddParentElementClass : '.sortable-active',
dragElementClass : '.sortable-drag',
dropElementClass : '.sortable-drop',

//callbacks
moveComplete : sortComplete

moveComplete : sortComplete
};

if (settings) {
$.extend(config, settings);

}

//Requires sortable object to have a unique id; add one if not present- made unique by referencing object y position
if(!sortableObject.attr("id")) {
objId = "sortable"+offsetTop;
objId = objId.split(".")[0];
sortableObject.attr("id", objId);


log('[loaded]', 1);


//add elements with constraint margin heights, so as to measure them with the proper applied style
//this lets us accept em's, for instance, instead of requiring px
if (config.constrain) {
if (config.constrainMarginTop != 0) {
var cmt_el = $('<div style="position:absolute; height:' + config.constrainMarginTop + '"/>');
$(sortableObject).prepend(cmt_el);
$.extend(config, {_cmt: cmt_el.height()});
cmt_el.remove();
}

if (config.constrainMarginBottom != 0) {
var cmb_el = $('<div style="position:absolute; height:' + config.constrainMarginBottom + ';"/>');
$(sortableObject).append(cmb_el);
$.extend(config, {_cmb: cmb_el.height()});
cmb_el.remove();
}

log('[constraint margins] top:' + config._cmt + '; bottom:' + config._cmb, 1);
}


$.extend(config, {ddParentElementClassName: config.ddParentElementClass.replace(/^\./,'')});
$.extend(config, {dragElementClassName: config.dragElementClass.replace(/^\./,'')});
$.extend(config, {dropElementClassName: config.dropElementClass.replace(/^\./,'')});


//Requires sortable object to have a unique id; add one if not present- made unique by referencing object y position
if(!sortableObject.attr('id')) {
objId = 'sortable' + offsetTop;
objId = objId.split('.')[0];
sortableObject.attr('id', objId);
}

//build drop zone limiter for proper scoping
var sortScope = "#"+sortableObject.attr("id")+" > "+config.sortElement;
var sortScope = '#' + sortableObject.attr('id') + ' > ' + config.sortElement;

//since we're using an absolutely position proxy during dragging, we'll need the parent to have a declared position
sortElement = $(this).find(config.sortElement);
if ($(this).css('position') !='absolute' && $(this).css('position') != 'fixed') {
$(this).css('position', 'relative')
}
if ($(this).css('position') !== 'absolute' && $(this).css('position') !== 'fixed') {
$(this).css('position', 'relative');
}

sortElement
.drag('dragstart', function(ev, dd) {
sortableObject.addClass('sorting');
//requires handle
if (!$(ev.target).is(config.handle)) { return false; }
//locate and name nested scroll-y parent in the dom, if present
scrollParent = $(this).parents().filter(config.scrollParentClass)[0];
//copy the dragged item so you'll see it as you drag. Make it semi-translucent
$(this).clone().addClass('active').css({opacity: .8, position: "absolute"}).insertAfter(this);
//hide the currently dragged item
$(this).css('opacity', .2);
sortElement

.drag('dragstart', function (ev, dd) {
log('[dragstart]', 2);

offsetTop = sortableObject.offset().top;

//requires handle
if (!$(ev.target).is(config.handle)) {
return false;
}

sortableObject.addClass(config.ddParentElementClassName);

//locate and name nested scroll-y parent in the dom, if present
scrollParent = $(this).parents().filter(config.scrollParentClass)[0];

})
.drag(function( ev, dd ){

//used for scrolling only (supports only vertical scrolling)
if (config.scroll) {
if (scrollParent) {
//scroll parent container that has y-overflow: scroll; lazy recogniztion of this container via class
if(($(scrollParent).offset().top + scrollParent.offsetHeight) - ev.pageY < config.scrollSensitivity)
scrollParent.scrollTop = scrolled = scrollParent.scrollTop + config.scrollSpeed;
else if(ev.pageY - $(scrollParent).offset().top < 40)
scrollParent.scrollTop = scrolled = scrollParent.scrollTop - config.scrollSpeed;

} else {
//scoll document
if(ev.pageY - $(document).scrollTop() < config.scrollSensitivity)
$(document).scrollTop($(document).scrollTop() - config.scrollSpeed);
else if($(window).height() - (ev.pageY - $(document).scrollTop()) < config.scrollSensitivity)
$(document).scrollTop($(document).scrollTop() + config.scrollSpeed);
//copy the dragged item so you'll see it as you drag. Make it semi-translucent
$(this).clone().addClass(config.dragElementClassName).css({'position': 'absolute'}).insertAfter(this);

//hide the currently dragged item
$(this).addClass(config.dropElementClassName);

})
.drag(function (ev, dd) {

//used for scrolling only (supports only vertical scrolling)
if (config.scroll) {
if (scrollParent) {
//scroll parent container that has y-overflow: scroll; lazy recogniztion of this container via class
if(($(scrollParent).offset().top + scrollParent.offsetHeight) - ev.pageY < config.scrollSensitivity) {
scrollParent.scrollTop = scrolled = scrollParent.scrollTop + config.scrollSpeed;
} else if(ev.pageY - $(scrollParent).offset().top < 40) {
scrollParent.scrollTop = scrolled = scrollParent.scrollTop - config.scrollSpeed;
}

} else {
//scoll document
if(ev.pageY - $(document).scrollTop() < config.scrollSensitivity) {
$(document).scrollTop($(document).scrollTop() - config.scrollSpeed);
} else if($(window).height() - (ev.pageY - $(document).scrollTop()) < config.scrollSensitivity) {
$(document).scrollTop($(document).scrollTop() + config.scrollSpeed);
}
}
//move the cloned element along with the mouse. Not tested across all browsers yet...
$('.active').css({top: dd.offsetY - offsetTop});

var drop = dd.drop[0],
method = $.data( drop || {}, 'drop+reorder' );
if (drop && ( drop != dd.current || method != dd.method)){
$( this )[ method ]( drop );
dd.current = drop;
dd.method = method;
dd.update();
}
}, { drop: sortScope})

.drag('end',function( ev, dd ){
$(this).css('opacity', 1);
sortableObject.removeClass('sorting');
sortableObject.find('.active').remove();
config.moveComplete();
})

.drop('init',function(ev, dd){
return !(this == dd.drag);
});

$.drop({
tolerance: function( event, proxy, target ){

var test = event.pageY > ( target.top + target.height / 3.2 );
$.data( target.elem, 'drop+reorder', test ? 'insertAfter' : 'insertBefore' );
return this.contains( target, [ event.pageX, event.pageY ] );
}
});


//move the cloned element along with the mouse. Not tested across all browsers yet...
var projected_top = (dd.offsetY - offsetTop) - (config.dragElementCenter ? ($(config.dragElementClass).height()/2) : 0);

var constraint_top = (config._cmt || 0);
var constraint_bottom = $(sortableObject).height() - (config._cmb || 0);

if (!config.constrain || (projected_top >= constraint_top && (projected_top + $(config.dragElementClass).height()) <= constraint_bottom)) {
$(config.dragElementClass).css({top: projected_top});
}

log('[drag] projected_top:'+projected_top+'; constraint_top:'+constraint_top+'; constraint_bottom:'+constraint_bottom, 3);


var drop = dd.drop[0],
method = $.data( drop || {}, 'drop+reorder' );
if (drop && ( drop !== dd.current || method !== dd.method)){
$( this )[ method ]( drop );
dd.current = drop;
dd.method = method;
dd.update();
}

}, {drop: sortScope})

.drag('end', function (ev, dd) {
log('[dragend]', 2);

sortableObject.removeClass(config.ddParentElementClassName);
sortableObject.find(config.dragElementClass).remove();
$(this).removeClass(config.dropElementClassName);

config.moveComplete();
})

.drop('init',function (ev, dd) {
//log('[init]', 2);
return (this !== dd.drag);
});

$.drop({
tolerance: function (event, proxy, target) {
var test = event.pageY > (target.top + target.height / 3.2);
$.data(target.elem, 'drop+reorder', test ? 'insertAfter' : 'insertBefore');
return this.contains(target, [event.pageX, event.pageY]);
}
});

};

})( jQuery );
}(jQuery));