Scratch

/*
* touch-drag.js
* version: 0.1 developing
* deveoped by Bill Ferry of Macrobit
* part of Moose developer tools
* this plugin is open source
*
* This plugin allows drag, drop, diolog, selectable, sortable, resizable, slider, and *other touch incapable jQuery UI effects. With this plugin, you can use both *touch devices and a regular mouse.
*______________________________________
*How to use this plugin
*----Drag----
* Initialize: $(selector).drag(); or $(selector).drag(method); or
* $(selector).drag(options); or $(selector).drag(method, options);
###
* Options: 
* revert: takes a boolean, default false, goes to initial position after drag is done
* revertDuration: takes an integer of milliseconds, default 10, animation duration for revert
* opacity: takes a float between 0 and 1, defaults 1, opacity css during drag
* zIndex: the css z-index of Clone helper, default 50, accepts integers
* xAxis: if it is draggable on the x axis, default true, accepts true/false
* yAxis: if it is draggable on the y axis, default true, accepts true/false
* helper: decides if it is clone helper, accepts string, defaults original, but takes clone
* delay: time delay before drag, defaults 0, accepts integer as milliseconds, UNSTABLE
* position: css value of position on set, defaults fixed, accepts valid css position value
* parent: parent element to be in boundg of, defaults body, accepts jQuery selector, UNSTABLE
* start: function to execute when drag starts
* move: function to execute when drag moved
* end: function to execute when drag ended
###
* Methods: none at moment

*----Drop----
* Initialize: $(selector).drop(); or $(selector).drop(method); or
* $(selector).drop(options); or $(selector).drop(method, options);
###
* Options:
* accept: drag element to accept, defaults ".draggable", accepts jQuery selectors
*
###
* Methods: none at moment
*/
(function($){
/********* DRAG FUNCTIONS *************/
$.fn.drag = function(options){
// make some options
var setting = $.extend( {
revert : false,
revertDuration : 10,
xAxis : true,
yAxis : true,
opacity : 1,
helper : "original",
delay : 0,
zIndex : 50,
position : "fixed",
positionAfterDrag : "absolute",
parent : "body",
start : function(){},
move : function(){},
end : function(){}
}, options);
//add class and correct style
this.css("position", setting.position);
this.addClass("draggable");
//return this for chainability
return this.each(function(){

/* bind all touch events to the objects
Events are touchstart, touchmove, and touchend.
There is one more, touchcancel, but documentation on using it is unknown
Use .moosetoolstouchui namespace to not overwrite
*/
$(this).bind("touchstart.moosetoolstouchui mousedown.moosetoolstouchui", function(e){

//prevent the browser from scrolling during a drag
e.preventDefault();
//support for mouse
$.data(this, "mouseDown", true);
if(setting.delay!=0){
//set a timeout for time delay
$.data(this, "delayTimeoutDone", false);
setTimeout(function(){
$.data(this, "delayTimeoutDone", true);
}, setting.delay);
}else{
$.data(this, "delayTimeoutDone", true);
}
//we need its current opacity for later
$.data(this, "originalOpacity", $(this).css("opacity"));
//make a clone helper, if specified
if(setting.helper=="clone"){
$(this).clone().insertAfter(this).attr("clonedragplaceholder", "true").css("z-index", setting.zIndex);
}
if(setting.helper=="placeholder"){
$(this).clone().insertAfter(this).attr("dragplaceholder", "true").css("position", "relative").text("              ");
}
//set e to e.touches for IOS and other multi touch screens
if(e.touches){
e = e.touches[0];
}
//get initial position just in case for revert
$.data(this, "initX", $(this).css("left"));
$.data(this, "initY", $(this).css("top"));
//get and set info for offset dragging
var pX = e.pageX;
var pY = e.pageY;
if($(this).css("left")!="auto"&&$(this).css("top")!="auto"||$(this).css("position")=="absolute"){
var eX = parseInt($(this).css("left"));
var eY = parseInt($(this).css("top"));
var offsetX = pX-eX;
var offsetY = pY-eY;
$.data(this, "offsetX", offsetX);
$.data(this, "offsetY", offsetY);
}else{
$.data(this, "offsetX", 0);
$.data(this, "offsetY", 0);
//position needs to be absolute before a drag can happen
$(this).css("position", "absolute");
}
//tell drop zones that a drop is coming its way
$(this).trigger("dragstart", e);
});
$(this).bind("touchmove.moosetoolstouchui mousemove.moosetoolstouchui", function(e){
//set e to e.touches for IOS and other multi touch screens
if(e.touches){
e = e.touches[0];
}
//support for mouse
if($.data(this, "mouseDown")){ 
//delay timeout
if($.data(this, "delayTimeoutDone")){
//set opacity
$(this).css("opacity", setting.opacity);
//get offset X and Y, then do final calculations
var tmpX = parseInt($.data(this, "offsetX"));
var tmpY = parseInt($.data(this, "offsetY"));
var lo= parseInt(e.pageX)-tmpX;
var to = parseInt(e.pageY)-tmpY;
//set elements final position on selected axis and position
var goLeft = true;
var goTop = true;
/*
if(setting.parent!="body"){
if($(setting.parent).css("position)=="absolute"){
if(lo<parseInt($(this).css("left"))+parseInt($(this).css("width"))){
goLeft = true;
}else{
goLeft = false;
}
}else{
if(lo<parseInt($(this).css("width"))){
goLeft = true;
}else{
goLeft = false;
}
}
}
*/
if(setting.xAxis&&goLeft){
$(this).css("left", lo+"px");
}
if(setting.yAxis&&goTop){
$(this).css("top", to+"px");
}

//just in case drop zones or the other elements want to know
$(this).trigger("dragmove", e);
}
}
});
//only need touch end to tell drops and to revert (if true)
$(this).bind("touchend.moosetoolstouchui mouseup.moosetoolstouchui", function(e){
//Set position
$(this).css("position", setting.positionAfterDrag);
//add support for mouse
$.data(this, "mouseDown", false);
//remove clone helpers
$("* [clonedragplaceholder]").remove();
$("* [dragplaceholder]").remove();
//set it's opacity back to what it was
$(this).css("opacity", $.data(this, "originalOpacity"));
if(setting.revert){
$(this).animate({
left : $.data(this, "initX"),
top : $.data(this, "initY")
}, setting.revertDuration);
}
//the drops should know what happened
if(e.touches){
e = e.touches[0];
}
$(this).trigger("dragend", e);
});
$(this).bind("dragstart.moosetoolstouchui", setting.start);
$(this).bind("dragmove.moosetoolstouchui", setting.move);
$(this).bind("dragend.moosetoolstouchui", setting.end);
});

/* for later use
//method calling logic
if(dragMethods[method]){
return dragMethods[methods].apply(this, Array.prototype.slice.call(arguments, 1));
}elseif(typeof method === 'object' || !method){
return dragMethods.init.apply(this, arguments);
}else{
$.error('Method '+method+' does not exist on Moose Tools jQuery Touch UI Drag');
}
*/
};
/***************DROP FUNCTIONS****************/
$.fn.drop = function(options){
//make some options
var setting = $.extend({
drop : function(){},
activate : function(){},
deactivate : function(){},
accept : ".draggable"
}, options);
//return this for chainability
return this.each(function(){
//keep local copy of this
var dropEl = this;
//bind drag events to selected elements
$(setting.accept).bind("dragend.moosetoolstouchuidrop", function(e){
//drag equation, it took me a while to get it right
if(parseInt($(this).css("left"))+parseInt($(this).css("width"))>parseInt($(dropEl).css("left"))&&parseInt($(this).css("left"))<parseInt($(dropEl).css("left"))+parseInt($(dropEl).css("width"))&&parseInt($(this).css("top"))+parseInt($(this).css("height"))>parseInt($(dropEl).css("top"))&&parseInt($(this).css("top"))<parseInt($(dropEl).css("top"))+parseInt($(dropEl).css("height"))){
//the draggable element has been dropped!
//we need to tell everyone
$(this).trigger("dropped", e);
//the drop element gets a trigger, too
$(dropEl).trigger("drop", e);
}
});
//bind user custom events
$(this).bind("drop.moosetoolstouchuidrop", setting.drop);
$(setting.accept).bind("dragstart.moosetoolstouchuidrop", setting.activate);
$(setting.accept).bind("dragend.moosetoolstouchuidrop", setting.deactivate);
});
};
/***********SORT FUNCTIONS*************/
$.fn.sort = function(){
return this.each(function(){
$(this).children("li").each(function(){
$(this).drag({
xAxis:false,
helper:"placeholder",
position:"relative",
positionAfterDrag:"relative",
start:function(e){
$.data(this, "initPosition", e.pageY);
$.data(this, "tmpNum", 0);
},
move:function(e){
var initPosition = $.data(this, "initPosition");
var tmpNum = $.data(this, "tmpNum");
if(initPosition+30<e.pageY){
$("[dragplaceholder]").insertAfter($("[dragplaceholder]").next());
//window.alert($(this).next().text());
$.data(this, "initPosition", e.pageY);
tmpNum += 1;
}
if(initPosition-30>e.pageY){
$.data(this, "initPosition", e.pageY);
$("[dragplaceholder]").insertBefore($("[dragplaceholder]").prev());
tmpNum -= 1;
}
$.data(this, "tmpNum", tmpNum);
},
end:function(){
$("[dragplaceholder]").remove();
$(this).css("left", "auto").css("top", "auto");
var tmpNum = $.data(this, "tmpNum");
for(var j = 0;j<=tmpNum;j++){
$(this).insertAfter($(this).next());
}
if(tmpNum>-3){
//easy stuff, for it is one ahead
$(this).insertBefore($(this).prev());
}else{
//its two ahead with -3, three ahead with -4, so on
//loop difference of each number of -1 to tell how much to put behind
var diff = -1-tmpNum;
for(var j = 0;j<diff;j++){
$(this).insertBefore($(this).prev());
}
}
}
});
});
});
};
/**************SliderBox functions*****************/
$.fn.sliderBox = function(){
var all = this;
return this.each(function(){
var $this = this;
$(this).css("height", "10px");
$(this).css("width", "100px");
$(this).html("<div class=\"sliderButton\" style=\"background-color:red;position:absolute;width:12px;height:12px;left:50px;\"></div>");
$(this).children(".sliderButton").drag({
yAxis : false,
parent : $this
});
});
};
/**************EXPERIMENTAL FUNCTIONS*************/
$.fn.addTouchEvents = function(){
return this.each(function(){
$(this).bind("touchstart", function(e){
if(e.touches){
e = e.touches[0];
}
$(this).trigger("mousedown", e);
$(this).trigger("mouseenter", e);
$(this).trigger("mousein", e);
});
$(this).bind("touchstart", function(e){
if(e.touches){
e = e.touches[0];
}
$(this).trigger("mousemove", e);
});
$(this).bind("touchend", function(e){
if(e.touches){
e = e.touches[0];
}
$(this).trigger("mouseup", e);
$(this).trigger("mouseleave", e);
$(this).trigger("mouseout", e);
});
});
};
})(jQuery);