Dragging

Making draggable DOM elements is easy with surebert.drag.js. Any super element (regular DOM elements passed through s$ or elements created dynamically with sb.element) have a makeDraggable() method when surebert.drag.js is included in your source code.

var draggableThing = s$('#myDiv');
draggableThing.makeDraggable();

ondragstart

Draggable elements have some other important properties. One of the is ondragstart. If this method is defined it fires any time the draggable element begins to be dragged. It receives one argument e, which is a reference to the mousedown event that cause the dragging to start. This event has all the properties of a regular event and can be used with any of surebert's event methods e.g. var target = sb.events.target(e); You can also refer to the element by referencing the "this" of the method

//in this example we update the date in the title of the doc when dragging starts
draggableThing.ondragstart = function(e){
	document.title = e.clientX;
};

ondragstop

If this method is defined it fires any time the draggable element is let go of. It receives one argument e, which is a reference to the mousedown event that cause the dragging to start. This event has all the properties of a regular event and can be used with any of surebert's event methods e.g. var target = sb.events.target(e); You can also refer to the element by referencing the "this" of the method

//in this example we update the date in the title of the doc when dragging stops, you could think of a much more
draggableThing.ondragstart = function(e){
	document.title = e.clientX;
};

ondrag

If this method is defined it fires any time the draggable elementis dragged. DO not use an alert in this function as it fires hundreds of tiems during dragging. It receives an argument e, which is a reference to the mousedown event that cause the dragging to start. This event has all the properties of a regular event and can be used with any of surebert's event methods e.g. var target = sb.events.target(e); It also received a pos argument which contains the current x and y pos e.g. pos{x:123,y:123} of the element. You can also refer to the element by referencing the "this" of the method.

draggableThing.lockY=1;

lockY

If this property is defined it locks the y axis when dragging e.g. the element only drags left to right.

//sets the body's background color proportional to the y pos of the element
draggableThing.ondrag = function(e, pos){
		var color = +Math.round(e.clientY/5);
		$('body').style.backgroundColor='rgb('+color+',145,'+color+')';
};

lockX

If this property is defined it locks the x axis when dragging e.g. the element only drags top to bottom.

draggableThing.lockY=1;