Alertnative for onDragStart for netscape

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
javagiripAsked:
Who is Participating?
 
dakydConnect With a Mentor Commented:
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
 
davidlars99Commented:
did you try
> window.document.ondragstart = new Function(.....)
0
 
davidlars99Commented:
I think it's only supported in IE
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
dakydCommented:
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
 
javagiripAuthor Commented:
Let me try your code
0
 
javagiripAuthor Commented:
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
 
dakydCommented:
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
 
javagiripAuthor Commented:
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
 
javagiripAuthor Commented:
Excellent, It works now.
0
 
javagiripAuthor Commented:
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
 
dakydCommented:
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
 
dakydCommented:
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
 
javagiripAuthor Commented:
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
 
dakydCommented:
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
 
javagiripAuthor Commented:
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
 
davidlars99Commented:
my fiiendly advice: you should increase points to the maximum :-)
0
 
javagiripAuthor Commented:
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
 
dakydCommented:
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
 
javagiripAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.