Solved

Alertnative for onDragStart for netscape

Posted on 2004-08-31
19
891 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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

746 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

8 Experts available now in Live!

Get 1:1 Help Now