hello...
i am displaying google images in my website. from this i would like to add some images into my favorate images. but i have seen more drag and drop functionalities every thing have image id's and using this image id functionality working. but there is no id's for google images to drag into <div> area. is there any chance to drag and drop into my favorates.actually drag image into textbox. i am getting image url in textbox. it is working in firefox,crome,safari but not I.E. here is my code.
<script src="http://www.google.com/jsapi?key=ABQIAAAA6A3orTpJebt5vPgaqKOlPhRVTWW_5xs2yfAqSYXwdRtQ52ArUhTNMisX2JlaFLxIgjvRrJnCJuU7dQ" type="text/javascript"></script>
<script type="text/javascript">
/*
* How to search for images and filter them by color.
*/
google.load('search', '1');
function OnLoad() {
var searchControlDiv = document.getElementById("content");
var control = new GSearchControl();
control.setResultSetSize(GSearch.LARGE_RESULTSET);
control.setLinkTarget(GSearch.LINK_TARGET_PARENT);
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
var isearcher;
var colors = [
GimageSearch.COLOR_RED,
GimageSearch.COLOR_ORANGE,
GimageSearch.COLOR_YELLOW,
GimageSearch.COLOR_GREEN,
GimageSearch.COLOR_TEAL,
GimageSearch.COLOR_BLUE,
GimageSearch.COLOR_PURPLE,
GimageSearch.COLOR_PINK,
GimageSearch.COLOR_WHITE,
GimageSearch.COLOR_GRAY,
GimageSearch.COLOR_BLACK,
GimageSearch.COLOR_BROWN
];
for (var i=0; i < colors.length; i++) {
var colorSearcher = new google.search.ImageSearch();
colorSearcher.setRestriction(GimageSearch.RESTRICT_COLORFILTER,
colors[i]);
var colorName = colors[i].substring(0,1).toUpperCase() + colors[i].substring(1);
colorSearcher.setUserDefinedLabel(colorName);
control.addSearcher(colorSearcher, options);
};
// tell the searcher to draw itself and tell it where to attach
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
control.draw(searchControlDiv, drawOptions);
control.execute("rings");
}
google.setOnLoadCallback(OnLoad);
</script>
<style type="text/css" media="screen">
body, table, p{
background-color: white;
font-family: Arial, sans-serif;
font-size: 13px;
}
.gsc-trailing-more-results {
display : none;
}
.gsc-resultsHeader {
display : none;
}
.gsc-results {
padding-left : 20px;
}
.gsc-control {
width : 800px;
}
.gsc-tabsArea {
margin-bottom : 5px;
}
</style>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="content">Loading...</div>
<form name="formx" action="" method="post" enctype="multipart/form-data">
<textarea class="textarea_image" id="imgarea" name="imgarea" rows='15' cols="40" onmouseover="return callajax();" onmouseout="return callajax();"></textarea>
</form>
</body>