<html><head>
<style type="text/css" media="screen">@import "images/test.css";</style>
<script src="images/prototype.js" language="javascript" type="text/javascript"></script>
<script src="images/scriptaculous.js" language="javascript" type="text/javascript"></script>
<script src="images/controls.js" language="javascript" type="text/javascript"></script>
<script src="images/effects.js" language="javascript" type="text/javascript"></script>
<script src="images/dragdrop.js" language="javascript" type="text/javascript"></script>
</head>
<body onload="setup()">
<div id="drag" class="drag">Hello</div>
<div id="box">
<div id="drop1" class="drop"></div><div id="drop2" class="drop"></div><div id="drop3" class="drop"></div>
<div id="drop4" class="drop"></div><div id="drop5" class="drop"></div><div id="drop6" class="drop"></div>
</div>
</body>
<script language="javascript" type="text/javascript">
var drag4Drop = new Array();
function setup(){
positionTable();
createDrag();
}
function createDrag(){
var dragElement = document.getElementById('drag');
var theEl = new Array();
for(var i = 0; i < 6; ++i)
theEl[i] = document.getElementById('drop' + (i+1));
var dragObj = new Draggable(dragElement.id,{revert:true,ghosting:true});
for(var i = 0; i < 6; ++i){
Droppables.add(theEl[i].id, {accept:['drag','hasData','drop'], hoverclass:'over', onDrop:
function(element1, element2){//element1 - drag; element2 - drop
if(element1.className == "drag"){
element2.innerText = element1.innerText;
for(var i = 0; i < 6; ++i)
if(element2.id==("drop" + (i+1)))
drag4Drop[i] = new Draggable(element2.id,{revert:true,ghosting:true});
hasDataChangeStyle(element2);
}
else if(element1.className == "hasData"){
if(element2.innerText==""){
for(var j = 0; j < 6; ++j){
if(element1.id == ("drop" + (j+1)))
drag4Drop[j].destroy();
if(element2.id == ("drop" + (j+1)))
drag4Drop[0] = new Draggable(element2.id,{revert:true,ghosting:true});
}
element2.innerText = element1.innerText;
element1.innerText = "";
hasNoDataChangeStyle(element1);
hasDataChangeStyle(element2);
}
else{
var temp = element1.innerText;
element1.innerText = element2.innerText;
element2.innerText = temp;
}
}
}});
}
Droppables.add(dragElement.id,{accept:['hasData'],onDrop:
function(element1, element2){
element1.innerText = "";
for(var i = 0; i < 6; ++i)
if(element1.id == ("drop" + (i+1)))
drag4Drop[i].destroy();
hasNoDataChangeStyle(element1);}});
}
function hasDataChangeStyle(element){element.className = "hasData";}
function hasNoDataChangeStyle(element){element.className = "drop";}
function positionTable(){
var element;
for(var i = 0; i < 6; ++i){
element = document.getElementById("drop" + (i+1));
if(i < 3)
element.style.top = 5 + 5*i - 55*i + "px";
else
element.style.top = 5 + 5*i - 55*i + 55 + "px";
element.style.left = (((i)%3))*55 + 5 + "px";
}
}
</script>
</html>
wysiwyg-for-script-aculo-us-inplaceeditor-using-tinymce
ie developer toolbar div prototype method.jpg
|
