Solved

Alertnative for onDragStart for netscape

Posted on 2004-08-31
19
892 Views
Last Modified: 2008-01-09
Hi,

I am not able to use the onDragStart in netscape and Mozilla browsers, is there an alternative for onDragStart() javascript function for dragging and dropping texts/images that works in Netscape/IE?

Thanks
0
Comment
Question by:javagirip
  • 9
  • 7
  • 3
19 Comments
 
LVL 13

Expert Comment

by:davidlars99
ID: 11942320
did you try
> window.document.ondragstart = new Function(.....)
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 11942356
I think it's only supported in IE
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11942459
You could try something like this, it uses a combination of onmousedown, onmouseup, and onmousemove to click and drag.  Depending on what you want to do, you could put your function in the setMark() function or in the if clause of the myDrag() function.  If you don't want the function to execute until the object actually starts moving, then put it in the if clause of myDrag().  If you want the function to execute before the object starts moving, then the setMark() function might be the way to go.  Either way, hopefully this will at least point you in the right direction, hope that helps.

<html>
<head>
<style type="text/css">
#draggable {
  border: 2px solid #BBDDBB;
  position: absolute;
  top: 50px;
  left: 50px;
}
</style>
<script type="text/javascript">
window.onload = init;

function init()
{
  obj = document.getElementById("draggable");
  obj.onmousedown = setMark;
  obj.onmouseup = clearMark;
  obj.onmousemove = myDrag;
  obj.ondrag = function () {return false;};
  mark = false;
}

function setMark(evt)
{
  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;  
  mark = true;
  offsetX = parseInt(getX(this)) - parseInt(x);
  offsetY = parseInt(getY(this)) - parseInt(y);
}

function clearMark()
{
  mark = false;
}

function myDrag(evt)
{
  if (mark)
  {
    var x = window.event? event.x: evt.clientX;
    var y = window.event? event.y: evt.clientY;
    obj.style.top = (parseInt(y) + offsetY - 2) + "px";
    obj.style.left = (parseInt(x) + offsetX - 2) + "px";
  }
}

function getX(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetLeft;
    temp = temp.offsetParent;
  }
  return answer;
}

function getY(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetTop;
    temp = temp.offsetParent;
  }
  return answer;
}
</script>
</head>

<body>
<div id="draggable">SOME TEXT GOES HERE</div>
</body>
</html>
0
 

Author Comment

by:javagirip
ID: 11942706
Let me try your code
0
 

Author Comment

by:javagirip
ID: 11942774
Thanks a lot your sample code.

Yes, it works in both netscape and IE, but I really need to drag an image that has a vlaue in it, and drop it in to a text box. Here is my sample application that works in IE, try to drag the blue button at the top and drop it in one of the text area

http://mercury.ornl.gov/capturePosition.html

But I couldn't get it working on the netscape. Any suggestion would be greatly appreciated

Thanks again

Here is the code for that:
<html>

<script language="javascript">
<!--
                                   
function startDrag(info) {
  window.event.dataTransfer.setData("Text", info);
  window.event.dataTransfer.effectAllowed = "copy";                
}

function drop(targetID) {
  window.event.returnValue = false;                          
  window.event.dataTransfer.dropEffect = "copy";              
  targetID.value = window.event.dataTransfer.getData("Text");  
}

function showDragCursor() {
  window.event.returnValue = false;
  window.event.dataTransfer.dropEffect = "copy";
}

function submitMeasForm()
{  
  tmeasForm=top.document.inputForm;
  var msg;
  for (i = 0; i< tmeasForm.elements.length; i++) {
      msg += " " + i + " - " + tmeasForm.elements[i].name +
             "(" + tmeasForm.elements[i].type + ") = '" +
             tmeasForm.elements[i].value + "'";
    }
  alert(msg);
  tmeasForm.submit();
}
// -->
</script>

<title>drag-n-drop</title>

<body bgcolor="#eeeeee" text="#333333" link="#333333" vlink="#333333" alink="#333333">

<center>
<form name="inputForm">
<table border="0" cellspacing="0" cellpadding="5" width="400">

 <tr>
  <td bgcolor="#cccccc">
   <p><img src="junk.gif" onDragStart="startDrag('image name 1')">image name 1</p>
   <p><img src="junk.gif" onDragStart="startDrag('image name 2')">image name 2</p>
   <p><img src="junk.gif" onDragStart="startDrag('image name 3')">image name 3</p>
   <p><img src="junk.gif" onDragStart="startDrag('image name 4')">image name 4</p>
   <p><img src="junk.gif" onDragStart="startDrag('image name 5')">image name 5</p>
   <p><img src="junk.gif" onDragStart="startDrag('image name 6')">image name 6</p>
  </td>
 </tr>
</table>
<table>
  <tr>
   <td><p><input id="target1" name = "target1" value="" ondragenter="showDragCursor()" ondragover="showDragCursor()" ondrop="drop(this)"></p></td>
   <td><p><input id="target2" name = "target2" value="" ondragenter="showDragCursor()" ondragover="showDragCursor()" ondrop="drop(this)"></p></td>
   <td><p><input id="target3" name = "target3" value="" ondragenter="showDragCursor()" ondragover="showDragCursor()" ondrop="drop(this)"></p></td>
  </tr>
  <tr>
   <td><p><input id="target4" name = "target4" value="" ondragenter="showDragCursor()" ondragover="showDragCursor()" ondrop="drop(this)"></p></td>
   <td><p><input id="target5" name = "target5" value="" ondragenter="showDragCursor()" ondragover="showDragCursor()" ondrop="drop(this)"></p></td>
   <td><p><input id="target6" name = "target6" value="" ondragenter="showDragCursor()" ondragover="showDragCursor()" ondrop="drop(this)"></p></td>
  </tr>
    <tr>
   <td><p><input id="target7" name = "target7" value="" ondragenter="showDragCursor()" ondragover="showDragCursor()" ondrop="drop(this)"></p></td>
   <td><p><input id="target8" name = "target8" value="" ondragenter="showDragCursor()" ondragover="showDragCursor()" ondrop="drop(this)"></p></td>
   <td><p><input id="target9" name = "target9" value="" ondragenter="showDragCursor()" ondragover="showDragCursor()" ondrop="drop(this)"></p></td>
  </tr>
</table>
<INPUT TYPE=SUBMIT SIZE="36" NAME=SubmitToSC  value ="Capture Image Positions" tabindex="6" onClick = "submitMeasForm();">      
</form>
</center>

</body>

</html>

 
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11943322
Will this work?  It checks where you let go of the mouse, so that if it is over one of the inputs, it stores the innerHTML of the div into that text input.  As you can tell, the text inputs need to have an id of 'textX", where X is some number.  Hope that helps.

<html>
<head>
<style type="text/css">
#draggable {
  border: 2px solid #BBDDBB;
  position: absolute;
  left: 25%;
  top: 15%;
  width: 15%;
  z-index: 2;
}

#theInps {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
}
</style>
<script type="text/javascript">
window.onload = init;

function init()
{
  obj = document.getElementById("draggable");
  obj.onmousedown = setMark;
  obj.onmouseup = clearMark;
  obj.onmousemove = myDrag;
  obj.ondrag = function () {return false;};
  // now set up inputs
  coords = new Array();
  i = 0;
  while (document.getElementById("text" + i))
  {
    var textObj = document.getElementById("text" + i);
    coords[i] = new Array();
    var startX = getX(textObj);
    coords[i][0] = startX + "-" + (startX + textObj.offsetWidth);
    var startY = getY(textObj);
    coords[i][1] = startY + "-" + (startY + textObj.offsetHeight);
    i ++;
  }
  mark = false;
}

function setMark(evt)
{
  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;
  mark = true;
  offsetX = parseInt(getX(this)) - parseInt(x);
  offsetY = parseInt(getY(this)) - parseInt(y);
}

function clearMark(evt)
{
  mark = false;

  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;
  for (var i = 0; i < coords.length; i ++)
  {
    var xCoords = coords[i][0].split("-");
    var yCoords = coords[i][1].split("-");
   
    if (x >= xCoords[0] && x <= xCoords[1] &&
        y >= yCoords[0] && y <= yCoords[1])
    {
      document.getElementById("text" + i).value = obj.innerHTML;
      obj.style.left = "25%";
      obj.style.top = "15%";
      break;
    }      
  }
}

function myDrag(evt)
{
  if (mark)
  {
    var x = window.event? event.x: evt.clientX;
    var y = window.event? event.y: evt.clientY;
    obj.style.top = (parseInt(y) + offsetY - 2) + "px";
    obj.style.left = (parseInt(x) + offsetX - 2) + "px";
  }
}

function getX(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetLeft;
    temp = temp.offsetParent;
  }
  return answer;
}

function getY(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetTop;
    temp = temp.offsetParent;
  }
  return answer;
}
</script>
</head>

<body>
<div id="draggable">TEXT GOES HERE</div>
<div id="theInps">
  <input type="text" id="text0" /><input type="text" id="text3" /><br />
  <input type="text" id="text1" /><input type="text" id="text4" /><br />
  <input type="text" id="text2" /><input type="text" id="text5" /><br />
</div>
</body>
</html>
0
 

Author Comment

by:javagirip
ID: 11944591
Yes, this works!, but I am not that javascript expert and will it be possible for you to modify my code with your logic?
0
 
LVL 19

Accepted Solution

by:
dakyd earned 100 total points
ID: 11945454
Okay, give this a shot - you can move the divs and text inputs around in your page however you wish if you don't like how they're positioned.  The only thing is, keep the divs that are going to be drag-able with id's of "dragX" and the text inputs with id's of "textX", where X is a number in both cases.  Hope that helps.

<html>
<head>
<style type="text/css">
#theImgs {
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

#theImgs div {
  background-color: #CCCCCC;
}

#theInps {
  margin-left: auto;
  margin-right: auto;
  width: 45%;
}

#theInps input {
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 32%;
}
</style>
<script type="text/javascript">
window.onload = init;

function init()
{
  var i = 0;
  while (document.getElementById("drag" + i))
  {
    var obj = document.getElementById("drag" + i);
    obj.onmousedown = setMark;
    obj.onmouseup = clearMark;
    obj.onmousemove = myDrag;
    obj.ondrag = function () {return false;};
    i ++;
  }
  // now set up inputs
  coords = new Array();
  var i = 0;
  while (document.getElementById("text" + i))
  {
    var textObj = document.getElementById("text" + i);
    coords[i] = new Array();
    var startX = getX(textObj);
    coords[i][0] = startX + "-" + (startX + textObj.offsetWidth);
    var startY = getY(textObj);
    coords[i][1] = startY + "-" + (startY + textObj.offsetHeight);
    i ++;
  }
  mark = null;
}

function setMark(evt)
{
  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;
  mark = this;
  offsetX = parseInt(getX(this)) - parseInt(x);
  offsetY = parseInt(getY(this)) - parseInt(y);

  clone = document.createElement("div");
  clone.style.backgroundColor = "#CCCCCC";
  mark.parentNode.insertBefore(clone, mark);
}

function clearMark(evt)
{
  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;
  for (var i = 0; i < coords.length; i ++)
  {
    var xCoords = coords[i][0].split("-");
    var yCoords = coords[i][1].split("-");
   
    if (x >= xCoords[0] && x <= xCoords[1] &&
        y >= yCoords[0] && y <= yCoords[1])
    {
      var str = mark.innerHTML.replace(/<img src="\S*">/i, "");
      document.getElementById("text" + i).value = str;
      mark.style.position = "";
      mark.style.left = "";
      mark.style.top = "";
      mark.parentNode.removeChild(clone);
      break;
    }      
  }

  mark = null;
}

function myDrag(evt)
{
  if (mark)
  {
    clone.innerHTML = mark.innerHTML;
    var x = window.event? event.x: evt.clientX;
    var y = window.event? event.y: evt.clientY;

    mark.style.position = "absolute";
    mark.style.top = (parseInt(y) + offsetY) + "px";
    mark.style.left = (parseInt(x) + offsetX) + "px";
  }
}

function getX(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetLeft;
    temp = temp.offsetParent;
  }
  return answer;
}

function getY(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetTop;
    temp = temp.offsetParent;
  }
  return answer;
}
</script>
</head>

<body>
<div id="theImgs">
  <div id="drag0"><img src="img0" />IMG1</div>
  <div id="drag1"><img src="img1" />IMG2</div>
  <div id="drag2"><img src="img2" />IMG3</div>
  <div id="drag3"><img src="img3" />IMG4</div>
  <div id="drag4"><img src="img4" />IMG5</div>
  <div id="drag5"><img src="img5" />IMG6</div>
</div>
<div id="theInps">
  <input type="text" id="text0" /><input type="text" id="text3" /><input type="text" id="text6" /><br />
  <input type="text" id="text1" /><input type="text" id="text4" /><input type="text" id="text7" /><br />
  <input type="text" id="text2" /><input type="text" id="text5" /><input type="text" id="text8" /><br />
</div>
</body>
</html>
0
 

Author Comment

by:javagirip
ID: 11946344
Excellent, It works now.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:javagirip
ID: 11946494
mmm, when I tested, it gave me some strange results, it allows to drag an drop to any where in the window!!, and when I tried again the top list gets multiplied!! and not drag and drop aafter that.

what I would really like to see with this sample code is, if  I drag the top div, i should be only able to drop it in one of the input boxes, and it should not allow me to drop it in any other place, even if i try to drop it in some other plave in the window, it should just goback to it's original position. Will this be possible?

Thanks a lot for you time
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11947075
Yes, it allows you to drag and drop anywhere you want.  I didn't realize you wanted it to disappear if it isn't dropped into the text box (though it does make sense).  As for the multiplying, that's an error on my part.  I had to duplicate the object in order to maintain the same layout and look, but still allow the "Image X" to be dragged.  Usually the duplicate gets deleted, but as you found out, I left out a case and it accidentally stayed behind.  Give this a shot, it should be more like what you want.  HOpe that helps.

<html>
<head>
<style type="text/css">
#theImgs {
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

#theImgs div {
  background-color: #CCCCCC;
}

#theInps {
  margin-left: auto;
  margin-right: auto;
  width: 45%;
}

#theInps input {
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 32%;
}
</style>
<script type="text/javascript">
window.onload = init;

function init()
{
  var i = 0;
  while (document.getElementById("drag" + i))
  {
    var obj = document.getElementById("drag" + i);
    obj.onmousedown = setMark;
    obj.onmousemove = myDrag;
    obj.ondrag = function () {return false;};
    i ++;
  }
  // now set up inputs
  coords = new Array();
  var i = 0;
  while (document.getElementById("text" + i))
  {
    var textObj = document.getElementById("text" + i);
    coords[i] = new Array();
    var startX = getX(textObj);
    coords[i][0] = startX + "-" + (startX + textObj.offsetWidth);
    var startY = getY(textObj);
    coords[i][1] = startY + "-" + (startY + textObj.offsetHeight);
    i ++;
  }
  mark = null;
  window.onmouseup = clearMark;
}

function setMark(evt)
{
  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;
  mark = this;
  offsetX = parseInt(getX(this)) - parseInt(x);
  offsetY = parseInt(getY(this)) - parseInt(y);

  if (document.getElementById("clone"))
    clone.parentNode.removeChild(clone);
  clone = document.createElement("div");
  clone.id = "clone";
  clone.style.backgroundColor = "#CCCCCC";
  mark.parentNode.insertBefore(clone, mark);
}

function clearMark(evt)
{
  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;
  for (var i = 0; i < coords.length; i ++)
  {
    var xCoords = coords[i][0].split("-");
    var yCoords = coords[i][1].split("-");
   
    if (x >= xCoords[0] && x <= xCoords[1] &&
        y >= yCoords[0] && y <= yCoords[1])
    {
      var str = mark.innerHTML.replace(/<img src="\S*">/i, "");
      document.getElementById("text" + i).value = str;
      break;
    }
  }

  mark.style.position = "";
  mark.style.left = "";
  mark.style.top = "";
  mark.parentNode.removeChild(clone);
  mark = null;
}

function myDrag(evt)
{
  if (mark)
  {
    clone.innerHTML = mark.innerHTML;
    var x = window.event? event.x: evt.clientX;
    var y = window.event? event.y: evt.clientY;

    mark.style.position = "absolute";
    mark.style.top = (parseInt(y) + offsetY) + "px";
    mark.style.left = (parseInt(x) + offsetX) + "px";
  }
}

function getX(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetLeft;
    temp = temp.offsetParent;
  }
  return answer;
}

function getY(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetTop;
    temp = temp.offsetParent;
  }
  return answer;
}
</script>
</head>

<body>
<div id="theImgs">
  <div id="drag0"><img src="img0" />IMG1</div>
  <div id="drag1"><img src="img1" />IMG2</div>
  <div id="drag2"><img src="img2" />IMG3</div>
  <div id="drag3"><img src="img3" />IMG4</div>
  <div id="drag4"><img src="img4" />IMG5</div>
  <div id="drag5"><img src="img5" />IMG6</div>
</div>
<div id="theInps">
  <input type="text" id="text0" /><input type="text" id="text3" /><input type="text" id="text6"

/><br />
  <input type="text" id="text1" /><input type="text" id="text4" /><input type="text" id="text7"

/><br />
  <input type="text" id="text2" /><input type="text" id="text5" /><input type="text" id="text8"

/><br />
</div>
</body>
</html>
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11947195
Sorry, slight mistake, use this instead:

<html>
<head>
<style type="text/css">
#theImgs {
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

#theImgs div {
  background-color: #CCCCCC;
}

#theInps {
  margin-left: auto;
  margin-right: auto;
  width: 45%;
}

#theInps input {
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 32%;
}
</style>
<script type="text/javascript">
window.onload = init;

function init()
{
  var i = 0;
  while (document.getElementById("drag" + i))
  {
    var obj = document.getElementById("drag" + i);
    obj.onmousedown = setMark;
    obj.onmousemove = myDrag;
    obj.ondrag = function () {return false;};
    i ++;
  }
  // now set up inputs
  coords = new Array();
  var i = 0;
  while (document.getElementById("text" + i))
  {
    var textObj = document.getElementById("text" + i);
    coords[i] = new Array();
    var startX = getX(textObj);
    coords[i][0] = startX + "-" + (startX + textObj.offsetWidth);
    var startY = getY(textObj);
    coords[i][1] = startY + "-" + (startY + textObj.offsetHeight);
    i ++;
  }
  mark = null;
  window.onmouseup = clearMark;
}

function setMark(evt)
{
  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;
  mark = this;
  offsetX = parseInt(getX(this)) - parseInt(x);
  offsetY = parseInt(getY(this)) - parseInt(y);

  if (document.getElementById("clone"))
    clone.parentNode.removeChild(clone);
  clone = document.createElement("div");
  clone.id = "clone";
  clone.style.backgroundColor = "#CCCCCC";
  mark.parentNode.insertBefore(clone, mark);
}

function clearMark(evt)
{
  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;
  for (var i = 0; i < coords.length; i ++)
  {
    var xCoords = coords[i][0].split("-");
    var yCoords = coords[i][1].split("-");
   
    if (x >= xCoords[0] && x <= xCoords[1] &&
        y >= yCoords[0] && y <= yCoords[1] && mark)
    {
      var str = mark.innerHTML.replace(/<img src="\S*">/i, "");
      document.getElementById("text" + i).value = str;
      break;
    }
  }

  if (mark)
  {
    mark.style.position = "";
    mark.style.left = "";
    mark.style.top = "";
    mark.parentNode.removeChild(clone);
    mark = null;
  }
}

function myDrag(evt)
{
  if (mark)
  {
    clone.innerHTML = mark.innerHTML;
    var x = window.event? event.x: evt.clientX;
    var y = window.event? event.y: evt.clientY;

    mark.style.position = "absolute";
    mark.style.top = (parseInt(y) + offsetY) + "px";
    mark.style.left = (parseInt(x) + offsetX) + "px";
  }
}

function getX(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetLeft;
    temp = temp.offsetParent;
  }
  return answer;
}

function getY(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetTop;
    temp = temp.offsetParent;
  }
  return answer;
}
</script>
</head>

<body>
<div id="theImgs">
  <div id="drag0"><img src="img0" />IMG1</div>
  <div id="drag1"><img src="img1" />IMG2</div>
  <div id="drag2"><img src="img2" />IMG3</div>
  <div id="drag3"><img src="img3" />IMG4</div>
  <div id="drag4"><img src="img4" />IMG5</div>
  <div id="drag5"><img src="img5" />IMG6</div>
</div>
<div id="theInps">
  <input type="text" id="text0" /><input type="text" id="text3" /><input type="text" id="text6"

/><br />
  <input type="text" id="text1" /><input type="text" id="text4" /><input type="text" id="text7"

/><br />
  <input type="text" id="text2" /><input type="text" id="text5" /><input type="text" id="text8"

/><br />
</div>
</body>
</html>
0
 

Author Comment

by:javagirip
ID: 11951642
Great it fixed that problem, but  just found that when I drag an img from the top list to the input box, and it drops it properly on the first time, but if I again drag the same img object to a different input cell, I expected it should clear the previously entered text input, and put it in to the newly droped input area. But instead I think it is overwritting the same input box. Will this can be fixed?, also this works only on Netscape and Mozilla, but not in IE or Opera, but that is ok.
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11952762
Changed it so that at each image appears at most once in the text boxes.  Also works in IE, Mozilla & Opera - hope that helps.

<html>
<head>
<style type="text/css">
#theImgs {
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

#theImgs div {
  background-color: #CCCCCC;
}

#theInps {
  margin-left: auto;
  margin-right: auto;
  width: 45%;
}

#theInps input {
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 32%;
}
</style>
<script type="text/javascript">
window.onload = init;

function init()
{
  var i = 0;
  while (document.getElementById("drag" + i))
  {
    var obj = document.getElementById("drag" + i);
    obj.onmousedown = setMark;
    obj.onmousemove = myDrag;
    obj.ondrag = function () {return false;};
    i ++;
  }
  // now set up inputs
  coords = new Array();
  var i = 0;
  while (document.getElementById("text" + i))
  {
    var textObj = document.getElementById("text" + i);
    coords[i] = new Array();
    var startX = getX(textObj);
    coords[i][0] = startX + "-" + (startX + textObj.offsetWidth);
    var startY = getY(textObj);
    coords[i][1] = startY + "-" + (startY + textObj.offsetHeight);
    i ++;
  }
  mark = null;
  document.onmouseup = clearMark;
}

function setMark(evt)
{
  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;
  mark = this;
  offsetX = parseInt(getX(this)) - parseInt(x);
  offsetY = parseInt(getY(this)) - parseInt(y);

  if (document.getElementById("clone"))
    clone.parentNode.removeChild(clone);
  clone = document.createElement("div");
  clone.id = "clone";
  clone.style.backgroundColor = "#CCCCCC";
  mark.parentNode.insertBefore(clone, mark);
}

function clearMark(evt)
{
  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;
  for (var i = 0; i < coords.length; i ++)
  {
    var xCoords = coords[i][0].split("-");
    var yCoords = coords[i][1].split("-");
   
    if (x >= xCoords[0] && x <= xCoords[1] &&
        y >= yCoords[0] && y <= yCoords[1] && mark)
    {
      var str = mark.innerHTML.replace(/<img src="\S*">/i, "");
      for (var j = 0; j < coords.length; j ++)
      {
        var currText = document.getElementById("text" + j);
        if (currText.value == str)
          currText.value = "";
      }
      document.getElementById("text" + i).value = str;
      break;
    }
  }

  if (mark)
  {
    mark.style.position = "";
    mark.style.left = "";
    mark.style.top = "";
    mark.parentNode.removeChild(clone);
    mark = null;
  }
}

function myDrag(evt)
{
  if (mark)
  {
    clone.innerHTML = mark.innerHTML;
    var x = window.event? event.x: evt.clientX;
    var y = window.event? event.y: evt.clientY;

    mark.style.position = "absolute";
    mark.style.top = (parseInt(y) + offsetY) + "px";
    mark.style.left = (parseInt(x) + offsetX) + "px";
  }
}

function getX(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetLeft;
    temp = temp.offsetParent;
  }
  return answer;
}

function getY(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetTop;
    temp = temp.offsetParent;
  }
  return answer;
}
</script>
</head>

<body>
<div id="theImgs">
  <div id="drag0"><img src="img0" />IMG1</div>
  <div id="drag1"><img src="img1" />IMG2</div>
  <div id="drag2"><img src="img2" />IMG3</div>
  <div id="drag3"><img src="img3" />IMG4</div>
  <div id="drag4"><img src="img4" />IMG5</div>
  <div id="drag5"><img src="img5" />IMG6</div>
</div>
<div id="theInps">
  <input type="text" id="text0" /><input type="text" id="text3" /><input type="text" id="text6" /><br />
  <input type="text" id="text1" /><input type="text" id="text4" /><input type="text" id="text7" /><br />
  <input type="text" id="text2" /><input type="text" id="text5" /><input type="text" id="text8" /><br />
</div>
</body>
</html>
0
 

Author Comment

by:javagirip
ID: 11955267
Great!. It worked in IE, but when  I tried in Opera, when I drag and drop it, it actulally drops the image path and the object name, for example: " <IMG SRC="file://localhost/C:/Documents and Settings/MYPC/Desktop/img0"/>IMG1" , but it works good in IE and netscape. Any idea? Sorry for this continues questions.
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 11955704
my fiiendly advice: you should increase points to the maximum :-)
0
 

Author Comment

by:javagirip
ID: 11956190
Actually, I tried to assign more points to this question, and give it to you, but as I already awarded the points to this question, I couldn't do any more to this question. But I will surely give more points to you if you can point me how I can do that!!
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11956542
Heh, thanks for the friendly advice, david, but it's not that big a deal.  Sorry, didn't realize that Opera actually includes the spaces and full file names.  Made a small tweak (and tested it in IE, Mozilla & Opera) - it should work now.  The only thing is that if you add any more tags to the "dragX" divs, it will break.  So for example:
<div id="drag0"><img src="img0.jpg" /><bold>IMAGE 0</bold></div>
will add the wrong value to the text inputs.  Hope that helps.

<html>
<head>
<style type="text/css">
#theImgs {
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

#theImgs div {
  background-color: #CCCCCC;
}

#theInps {
  margin-left: auto;
  margin-right: auto;
  width: 45%;
}

#theInps input {
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 32%;
}
</style>
<script type="text/javascript">
window.onload = init;

function init()
{
  var i = 0;
  while (document.getElementById("drag" + i))
  {
    var obj = document.getElementById("drag" + i);
    obj.onmousedown = setMark;
    obj.onmousemove = myDrag;
    obj.ondrag = function () {return false;};
    i ++;
  }
  // now set up inputs
  coords = new Array();
  var i = 0;
  while (document.getElementById("text" + i))
  {
    var textObj = document.getElementById("text" + i);
    coords[i] = new Array();
    var startX = getX(textObj);
    coords[i][0] = startX + "-" + (startX + textObj.offsetWidth);
    var startY = getY(textObj);
    coords[i][1] = startY + "-" + (startY + textObj.offsetHeight);
    i ++;
  }
  mark = null;
  document.onmouseup = clearMark;
}

function setMark(evt)
{
  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;
  mark = this;
  offsetX = parseInt(getX(this)) - parseInt(x);
  offsetY = parseInt(getY(this)) - parseInt(y);

  if (document.getElementById("clone"))
    clone.parentNode.removeChild(clone);
  clone = document.createElement("div");
  clone.id = "clone";
  clone.style.backgroundColor = "#CCCCCC";
  mark.parentNode.insertBefore(clone, mark);
}

function clearMark(evt)
{
  var x = window.event? event.x: evt.clientX;
  var y = window.event? event.y: evt.clientY;
  for (var i = 0; i < coords.length; i ++)
  {
    var xCoords = coords[i][0].split("-");
    var yCoords = coords[i][1].split("-");
   
    if (x >= xCoords[0] && x <= xCoords[1] &&
        y >= yCoords[0] && y <= yCoords[1] && mark)
    {
      var theIndex = mark.innerHTML.indexOf(">");
      var str = mark.innerHTML.substr(theIndex + 1, mark.innerHTML.length - theIndex - 1);
      for (var j = 0; j < coords.length; j ++)
      {
        var currText = document.getElementById("text" + j);
        if (currText.value == str)
          currText.value = "";
      }
      document.getElementById("text" + i).value = str;
      break;
    }
  }

  if (mark)
  {
    mark.style.position = "";
    mark.style.left = "";
    mark.style.top = "";
    mark.parentNode.removeChild(clone);
    mark = null;
  }
}

function myDrag(evt)
{
  if (mark)
  {
    clone.innerHTML = mark.innerHTML;
    var x = window.event? event.x: evt.clientX;
    var y = window.event? event.y: evt.clientY;

    mark.style.position = "absolute";
    mark.style.top = (parseInt(y) + offsetY) + "px";
    mark.style.left = (parseInt(x) + offsetX) + "px";
  }
}

function getX(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetLeft;
    temp = temp.offsetParent;
  }
  return answer;
}

function getY(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetTop;
    temp = temp.offsetParent;
  }
  return answer;
}
</script>
</head>

<body>
<div id="theImgs">
  <div id="drag0"><img src="img0" />IMG1</div>
  <div id="drag1"><img src="img1" />IMG2</div>
  <div id="drag2"><img src="img2" />IMG3</div>
  <div id="drag3"><img src="img3" />IMG4</div>
  <div id="drag4"><img src="img4" />IMG5</div>
  <div id="drag5"><img src="img5" />IMG6</div>
</div>
<div id="theInps">
  <input type="text" id="text0" /><input type="text" id="text3" /><input type="text" id="text6" /><br />
  <input type="text" id="text1" /><input type="text" id="text4" /><input type="text" id="text7" /><br />
  <input type="text" id="text2" /><input type="text" id="text5" /><input type="text" id="text8" /><br />
</div>
</body>
</html>
0
 

Author Comment

by:javagirip
ID: 11957355
Hi, Thanks a lot for helping me out. Yes it worked. I think I can still be able to have extra tags outside the <diV> for example:
  <SPAN STYLE="font-family: Verdana, Arial, Helvetica; font-size: 12px; color: Red; font-weight: bold;"><div id="drag0"><img src="img0" />IMG1</div></SPAN>
worked OK. So I can manage with this.

Excellent, and again thank you very much for your time and help.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now