The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

Sanjeevk (1) [Avatar] Offline
#1
I have used scriptaculous drag and drop javascript library to use in my application.


It is working fine in mdizzla but i have problem with IE7.

The error message shown is Object doesnt support this action.


I have attached the codes as below:





<html>

<head>

<title>Drag & Drop</title>


<style type="text/css">


td
{
width: 10em;
text-align: center;
}


table.mytable {
list-style-type: none;
padding: 4px 4px 0 4px;
margin: 0px;
font-size: 13px;
font-family: Arial, sans-serif;
}


table.mytable tr {
margin-bottom: 4px;
padding: 2px 2px;
border: 1px solid #c00;
background-color: #eee;
}


div.draggable {
cursor:move;
padding:2px;
background-color: #BBCCDD;
}


div.dropsite {
padding:2px;
background-color: #DDBB99;
}


div.hoverclass123
{
border:1px solid red;
}


</style>


<script language="JavaScript" type="text/javascript" src="javascript/prototype.js"></script>

<script language="JavaScript" type="text/javascript" src="javascript/scriptaculous.js"></script>

<script src="javascript/JsAjax.js" language="javascript" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">


window.onload = function()
{

var one = document.getElementById("1");

new Draggable(one, {ghosting:true, revert:true});


Droppables.add(one, {accept:'draggable',

hoverclass:'hoverclass123',

onDrop:function(element, dropon, event)

{


sendGetRequest("file.php?element="+element.innerHTML+'&element2='+dropon.innerHTML, 'test', 'test');

debug("dropped " + element.innerHTML + " on "
+ dropon.innerHTML + "
")


}});

var two = document.getElementById("2");

new Draggable(two, {ghosting:true, revert:true});


Droppables.add(two, {accept:'draggable',
hoverclass:'hoverclass123',

onDrop:function(element, dropon, event)
{


sendGetRequest("file.php?element="+element.innerHTML+'&element2='+dropon.innerHTML, 'test', 'test');
debug("dropped " + element.innerHTML + " on "
+ dropon.innerHTML + "
")


}});


var three = document.getElementById("3");

new Draggable(three, {ghosting:true, revert:true});


Droppables.add(three, {accept:'draggable',

hoverclass:'hoverclass123',

onDrop:function(element, dropon, event)
{


sendGetRequest("file.php?element="+element.innerHTML+'&element2='+dropon.innerHTML, 'test', 'test');

debug("dropped " + element.innerHTML + " on "
+ dropon.innerHTML + "
")


}});

};


function debug(text)

{
document.getElementById('debug').innerHTML
= "<pre>" + text + "</pre>";
}

</script>

</head>

<body>


Drag from this table:


<DIV STYLE="padding-left: 50pt;">
<table>
<tr>
<td>
<div id="1" class="draggable">1</div>
</td>
<td>
<div id="2" class="draggable">2</div>
</td>
<td>
<div id="3" class="draggable">3</div>
</td>

</DIV>


<div id="debug"></div>

<div id="test"></div>



</body>

</html>


The above code works fine in mozilla but not in IE7.

I cannot track the error . Can anyone help me out with the error.

file.php is just the ajax file that is called .