Here is example code for drag and drop
<html>
<head>
<title>Drag and Drop Example </title>
<script type="text/javascript" src="EventUtil.js"> </script>
</head>
<body>
<div id="myDiv1" class="draggable" style="background:red;width:100px;height:100px;position:absolute"></div>
<div id="myDiv2" class="draggable" style="background:blue;width:100px;height:100px;position:absolute;left:100px"> </div> <div id="myDiv3" class="draggable" style="background:green;width:100px;height:100px;position:absolute;left:200px"> </div>
<div id="myDiv4" class="draggable" style="background:yellow;width:100px;height:100px;position:absolute;left:300px"></div>
<script type="text/javascript">
var DragDrop = function(){
var dragging = null;
function handleEvent(event){
//get event and target
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//alert(" target "+ target);
//determine the type of event
switch(event.type){
case "mousedown":
if (target.className.indexOf("draggable") > -1){
dragging = target;
}
break;
case "mousemove":
if (dragging !== null){
//get event
event = EventUtil.getEvent(event);
//assign location
dragging.style.left = event.clientX + "px";
dragging.style.top = event.clientY + "px";
}
break;
case "mouseup":
dragging = null;
break;
}
};
//public interface
return {
enable: function(){
EventUtil.addHandler(document, "mousedown", handleEvent);
EventUtil.addHandler(document, "mousemove", handleEvent);
EventUtil.addHandler(document, "mouseup", handleEvent);
},
disable: function(){
EventUtil.removeHandler(document, "mousedown", handleEvent);
EventUtil.removeHandler(document, "mousemove", handleEvent);
EventUtil.removeHandler(document, "mouseup", handleEvent);
}
}
}();
DragDrop.enable();
</script>
</body>
</html>
Here at two methods DragDrop:enable() and disable(), is used which provides additional attach and detach all events , and provide addtional measure of control over the dragdrop functionality
here to start DragDrop for an object enable function has to be called , which in turn call EventUtil.addHandler , after which if any move event occurs [mouseup, mousedown,mousemove] in that page means it is captured in handleEvent
In handle event if mousedown is clicked over an div with the class draggable and moved means , X
In this example, an element ’ s left and top coordinates are set equal to the event object ’ s clientX and clientY proper ties, which places the element at the cursor ’ s position in the viewport. The effect is an element that follows the cursor around the page whenever it ’ s moved. that is how DragDrop works
when mouse is released dragging variable is cleared, for implementing DragDrop functionality the object should be in the absolute position
ps: source: Wrox Professional JavaScriptTM for Web Developers
Tuesday, May 10, 2011
Events
Events is base for Java script to interact with HTML , Events indicates some type of actions occurs in document or in browser etc,
Dom level 0 Event Handlers
The traditional way of assigning event handlers in Java script is to assign a function to an Event handler property, This was the events handler assignment method introduced in the fourth generation of web browser and still remains in all modern browser due to its simplicity and cross browser support. to assign an event handler to Java script , you must first retrieve a reference to the object to act on , each element has event handler properties the are typically all lowercase , such as onclick , An event handler is assigned by settings the property equal to a function as in this example
<html>
<body>
<div id="myBtn"> Click Here </div>
<script>
var btn = document.getElementById("myBtn");
btn.onclick = function()
{
alert(this.id); //"myBtn"
alert(this.innerHTML);
};
</script>
</body>
</html>
Dom level 2 Event Handler
DOM level 2 Events defines two methods to deal with assignment and removal of Events handlers
addEventListeners() and removeEventListener() . These methods exist on all DOM nodes and accept
three arguments : the event name to handler function and a Boolean value indicating whether to call the event handler during the capture phase (true) or during the bubble phase , Each element has event handler properties that are typically all the lowercase such as onclick, An event handler is assigned by setting the property equal to a function as this example
<html>
<div id="myBtn"> Click Here </div>
<script>
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function()
{
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("Hello world!");
}, false);
</script>
</body>
</html>
ps: source: Wrox Professional JavaScriptTM for Web Developers
Dom level 0 Event Handlers
The traditional way of assigning event handlers in Java script is to assign a function to an Event handler property, This was the events handler assignment method introduced in the fourth generation of web browser and still remains in all modern browser due to its simplicity and cross browser support. to assign an event handler to Java script , you must first retrieve a reference to the object to act on , each element has event handler properties the are typically all lowercase , such as onclick , An event handler is assigned by settings the property equal to a function as in this example
<html>
<body>
<div id="myBtn"> Click Here </div>
<script>
var btn = document.getElementById("myBtn");
btn.onclick = function()
{
alert(this.id); //"myBtn"
alert(this.innerHTML);
};
</script>
</body>
</html>
Dom level 2 Event Handler
DOM level 2 Events defines two methods to deal with assignment and removal of Events handlers
addEventListeners() and removeEventListener() . These methods exist on all DOM nodes and accept
three arguments : the event name to handler function and a Boolean value indicating whether to call the event handler during the capture phase (true) or during the bubble phase , Each element has event handler properties that are typically all the lowercase such as onclick, An event handler is assigned by setting the property equal to a function as this example
<html>
<div id="myBtn"> Click Here </div>
<script>
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function()
{
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("Hello world!");
}, false);
</script>
</body>
</html>
ps: source: Wrox Professional JavaScriptTM for Web Developers
Thursday, May 5, 2011
Multiple Column Sort
Here i have given the code of Multiple Column Sort
<html>
<head>
<script>
function generateCompareTRs(iCol,sortType)
{
return function compareTRs(oTR1, oTR2)
{
var sValue1 = oTR1.cells[iCol].firstChild.nodeValue;
var sValue2 = oTR2.cells[iCol].firstChild.nodeValue;
if(sortType=='Desc')
{
return -sValue1.localeCompare(sValue2);
}
else
{
return sValue1.localeCompare(sValue2);
}
};
}
function sortTable(sTableID, iCol)
{
var sorttype = document.getElementById('sortTypeHidden').value;
if(sorttype=='Desc')
{
document.getElementById('sortTypeHidden').value='Asce';
}
else
{
document.getElementById('sortTypeHidden').value='Desc';
}
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for (var i=0; i <colDataRows.length; i++)
{
aTRs[i] = colDataRows[i];
}
aTRs.sort(generateCompareTRs(iCol,sorttype));
var oFragment = document.createDocumentFragment();
for (var i=0; i <aTRs.length; i++)
{
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
}
</script>
</head>
<body>
<input type="hidden" id="sortTypeHidden" name="Asce">
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort', 0);" style="cursor:pointer">Last Name </th>
<th onclick="sortTable('tblSort', 1);" style="cursor:pointer">First Name </th>
<th onclick="sortTable('tblSort', 2);" style="cursor:pointer">Third < /th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith </td>
<td>John </td>
<td>A Third </td>
</tr>
<tr>
<td>Johnson </td>
<td> Betty </td>
<td>B Third </td>
</tr>
<tr>
<td>Henderson </td>
<td>Nathan < /td>
<td>C Third </td>
</tr>
<tr>
<td>Williams </td>
<td>James </td>
<td>D Third </td>
</tr>
<tr>
<td>Gilliam </td>
<td>Michael </td>
<td>E Third </td>
</tr>
<tr>
<td>Walker </td>
<td>Matthew </td>
<td>F Third </td>
</tr>
</tbody>
</table>
</body>
</html>
How it works
It works as like as Sorting single column Table
Sorting is done by getting the values of the specified column [dom collections] from the table and storing it to an array then sorting the array values.
Now the tr values are sorted using generateCompareTRs() and stored in a array ,
generateCompareTRs() will return another function compareTRs instead of handling it in one function because In general sorting is done using sort () api , which in turn calls another function generateCompareTRs() , in generateCompareTRs compareTRs function added because
compareTRs is a comparison function
an short note about comparison function
A comparison function is a function with a specific algorithm. It’s helpful to take a look at a basic comparison function before continuing with the explanation:
function comparison_function(value1, value2) {
if (value1 < value 2) {
return –1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
};
As you can see, a comparison function compares two values, which is why a comparison function
always has two arguments. If the first argument should come before the second argument, the
function returns –1. If the first argument should come after the second argument, the function
returns 1. If, however, the arguments are equal, the function returns 0. The comparison function
is used in the sort()
As said in desc , comparison function has got only two arguments , but in our case we need two additional argument. The index of the column which is to be sorted and what type of sorting needs to be done(i.e Ascending or Descending Sort ) , so we are constructing a function generateCompareTRs which in turn construct another function compareTRs
And for descending sorting putting a negative sign will do -string1.localeCompare(string2);
Here the sorted values needs to be appended in the table by replacing old tr,
That is done by creating document fragment and adding all the elements (array values) to it
Then appending all child nodes of document fragment back in to the tbody element
ps: source: Wrox Professional JavaScriptTM for Web Developers
<html>
<head>
<script>
function generateCompareTRs(iCol,sortType)
{
return function compareTRs(oTR1, oTR2)
{
var sValue1 = oTR1.cells[iCol].firstChild.nodeValue;
var sValue2 = oTR2.cells[iCol].firstChild.nodeValue;
if(sortType=='Desc')
{
return -sValue1.localeCompare(sValue2);
}
else
{
return sValue1.localeCompare(sValue2);
}
};
}
function sortTable(sTableID, iCol)
{
var sorttype = document.getElementById('sortTypeHidden').value;
if(sorttype=='Desc')
{
document.getElementById('sortTypeHidden').value='Asce';
}
else
{
document.getElementById('sortTypeHidden').value='Desc';
}
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for (var i=0; i <colDataRows.length; i++)
{
aTRs[i] = colDataRows[i];
}
aTRs.sort(generateCompareTRs(iCol,sorttype));
var oFragment = document.createDocumentFragment();
for (var i=0; i <aTRs.length; i++)
{
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
}
</script>
</head>
<body>
<input type="hidden" id="sortTypeHidden" name="Asce">
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort', 0);" style="cursor:pointer">Last Name </th>
<th onclick="sortTable('tblSort', 1);" style="cursor:pointer">First Name </th>
<th onclick="sortTable('tblSort', 2);" style="cursor:pointer">Third < /th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith </td>
<td>John </td>
<td>A Third </td>
</tr>
<tr>
<td>Johnson </td>
<td> Betty </td>
<td>B Third </td>
</tr>
<tr>
<td>Henderson </td>
<td>Nathan < /td>
<td>C Third </td>
</tr>
<tr>
<td>Williams </td>
<td>James </td>
<td>D Third </td>
</tr>
<tr>
<td>Gilliam </td>
<td>Michael </td>
<td>E Third </td>
</tr>
<tr>
<td>Walker </td>
<td>Matthew </td>
<td>F Third </td>
</tr>
</tbody>
</table>
</body>
</html>
How it works
It works as like as Sorting single column Table
Sorting is done by getting the values of the specified column [dom collections] from the table and storing it to an array then sorting the array values.
Now the tr values are sorted using generateCompareTRs() and stored in a array ,
generateCompareTRs() will return another function compareTRs instead of handling it in one function because In general sorting is done using sort () api , which in turn calls another function generateCompareTRs() , in generateCompareTRs compareTRs function added because
compareTRs is a comparison function
an short note about comparison function
A comparison function is a function with a specific algorithm. It’s helpful to take a look at a basic comparison function before continuing with the explanation:
function comparison_function(value1, value2) {
if (value1 < value 2) {
return –1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
};
As you can see, a comparison function compares two values, which is why a comparison function
always has two arguments. If the first argument should come before the second argument, the
function returns –1. If the first argument should come after the second argument, the function
returns 1. If, however, the arguments are equal, the function returns 0. The comparison function
is used in the sort()
As said in desc , comparison function has got only two arguments , but in our case we need two additional argument. The index of the column which is to be sorted and what type of sorting needs to be done(i.e Ascending or Descending Sort ) , so we are constructing a function generateCompareTRs which in turn construct another function compareTRs
And for descending sorting putting a negative sign will do -string1.localeCompare(string2);
Here the sorted values needs to be appended in the table by replacing old tr,
That is done by creating document fragment and adding all the elements (array values) to it
Then appending all child nodes of document fragment back in to the tbody element
ps: source: Wrox Professional JavaScriptTM for Web Developers
Subscribe to:
Posts (Atom)
