473,378 Members | 1,417 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

Drag drop text in field

Hi,

I have 5 fields in line where I need to drag and drop the text from one
field to another field and then all the fields need to re-order
themselves.

So for instance if I drag the text in field 1 to field 3, then field 2
text and field 3 move to field 1 and field 2.

I add the new order of text into an array so when the onDragEnd event
gets called it runs the loop of the array and adds them to field
1,2,3,4 and 5.

However after the onDragEnd finishes it removes the text from field
one, but all other fields are populated correctly with the new order of
text.

I can understand why it does this., but is there are way I can put the
new order of text in after the drag and drop without removing the text
from field 1???

Regards
Simon

Oct 9 '05 #1
5 2962
si********@hotmail.com wrote:
Hi,

I have 5 fields in line where I need to drag and drop the text from one
field to another field and then all the fields need to re-order
themselves.

So for instance if I drag the text in field 1 to field 3, then field 2
text and field 3 move to field 1 and field 2.

I add the new order of text into an array so when the onDragEnd event
gets called it runs the loop of the array and adds them to field
1,2,3,4 and 5.

However after the onDragEnd finishes it removes the text from field
one, but all other fields are populated correctly with the new order of
text.

I can understand why it does this., but is there are way I can put the
new order of text in after the drag and drop without removing the text
from field 1???


I guess your drag and drop code works out which to array items to
swap. You then swap them in the array and re-write the values to your
fields.

To swap values in an array between two indexes, assign the value of
one to a temporary variable, then assign the value of the second to
the first, then the temp to the second:

function swapValues(arrayRef, idx1, idx2)
{
var temp = arrayRef[idx1];
arrayRef[idx1] = arrayRef[idx2];
arrayRef[idx2] = temp;
}

--
Rob
Oct 9 '05 #2
I already assign the new order to a temporary array.

The problem is the order or setting the values to the fields.

I believe the problem is because when you drag and drop the content
from a field, the text you are dragging away will always be removed.

So when I assign all 5 values from the the temporary array (which
contains the new order) to the 5 fields, it removes the text from field
1 regardless.

Any more ideas?

Oct 9 '05 #3
si********@hotmail.com wrote:
I already assign the new order to a temporary array.

The problem is the order or setting the values to the fields.

I believe the problem is because when you drag and drop the content
from a field, the text you are dragging away will always be removed.

So when I assign all 5 values from the the temporary array (which
contains the new order) to the 5 fields, it removes the text from field
1 regardless.

Any more ideas?


Not without seeing your code.

--
Rob
Oct 9 '05 #4
Here is the code:

Note I can populate the cells no problem with the new order after you
dragged and dropped the fields.

Click on one of thr rows from the table at the top. It should populate
the fields.

Try dragging the text in field 1 to field 3. You notice that field 1
is missing the text.

I basically need all fields to be populated after the drag drop.

<html>
<head>
<script language="JavaScript">

var rowClicked;
var sourceIndex=-1;
var currentCarrierList=new Array();
var newCarrierList=new Array();
var selectedCarrier;
function setSourceIndex(index){
sourceIndex=index;
selectedCarrier=currentCarrierList[index];
}

function orderCarrierChoices(targetIndex){

if(sourceIndex>-1){
//alert("running!!");
var index=0;
for(var x=0;x<currentCarrierList.length;x++){
if(x==targetIndex){
//alert("if "+x+"=="+targetIndex);
//alert("1:"+currentCarrierList[x]);
newCarrierList[index]=currentCarrierList[x];
index++;
//alert("2:"+selectedCarrier);
newCarrierList[index]=selectedCarrier;
index++;
}
else if(sourceIndex!=x){
//alert("else x="+x);
newCarrierList[index]=currentCarrierList[x];
index++;
}
}
}
//alert("x");
//document.all.choice1.value="";
//document.all.choice2.value="";
//document.all.choice3.value="";
//document.all.choice4.value="";
//document.all.choice5.value="";
/*
for(var x=0;x<newCarrierList.length;x++){
alert(x+" carrier:"+newCarrierList[x]);
if(x==0){
document.all.choice1.value="";
document.all.choice1.value=newCarrierList[0];
//alert(x+" carrier:"+document.all.choice1.value);
}
else if(x==1){
document.all.choice2.value="";
document.all.choice2.value=newCarrierList[1];
//alert(x+" carrier:"+document.all.choice2.value);
}
else if(x==2){
document.all.choice3.value=newCarrierList[2];
//alert(x+" carrier:"+document.all.choice3.value);
}
else if(x==3){
document.all.choice4.value=newCarrierList[3];
//alert(x+" carrier:"+document.all.choice4.value);
}
else if(x==4){
document.all.choice5.value=newCarrierList[4];
//alert(x+" carrier:"+document.all.choice5.value);
}
}

currentCarrierList=newCarrierList;
*/
//alert("y");
}
function setCarrierChoices(index){
//alert("newCarrierList.length:"+newCarrierList.leng th);
for(var x=0;x<newCarrierList.length;x++){
//alert(x+" carrier:"+newCarrierList[x]);
if(x==0){
document.all.choice1.value="";
document.all.choice1.value=newCarrierList[0];
//alert(x+" carrier:"+document.all.choice1.value);
}
else if(x==1){
document.all.choice2.value="";
document.all.choice2.value=newCarrierList[1];
//alert(x+" carrier:"+document.all.choice2.value);
}
else if(x==2){
document.all.choice3.value=newCarrierList[2];
//alert(x+" carrier:"+document.all.choice3.value);
}
else if(x==3){
document.all.choice4.value=newCarrierList[3];
//alert(x+" carrier:"+document.all.choice4.value);
}
else if(x==4){
document.all.choice5.value=newCarrierList[4];
//alert(x+" carrier:"+document.all.choice5.value);
}
}

currentCarrierList=newCarrierList;
sourceIndex=-1;
resetRowValues();
//alert("end");
document.all.temp.value="qwerty";
}

function resetRowValues(){
//alert("setFields:"+row.cells(0).innerText);

rowClicked.cells(0).innerText=currentCarrierList[0];
rowClicked.cells(1).innerText=currentCarrierList[1];
rowClicked.cells(2).innerText=currentCarrierList[2];
rowClicked.cells(3).innerText=currentCarrierList[3];
rowClicked.cells(4).innerText=currentCarrierList[4];
}

function setFields(row){
//alert("setFields:"+row.cells(0).innerText);

rowClicked=row;

document.all.choice1.value=row.cells(0).innerText;
document.all.choice2.value=row.cells(1).innerText;
document.all.choice3.value=row.cells(2).innerText;
document.all.choice4.value=row.cells(3).innerText;
document.all.choice5.value=row.cells(4).innerText;

currentCarrierList[0]=row.cells(0).innerText;
currentCarrierList[1]=row.cells(1).innerText;
currentCarrierList[2]=row.cells(2).innerText;
currentCarrierList[3]=row.cells(3).innerText;
currentCarrierList[4]=row.cells(4).innerText;
}

function setFields2(){
//alert("mousemove2");
document.all.choice1.value=rowClicked.cells(0).inn erText;
document.all.choice2.value=rowClicked.cells(1).inn erText;
document.all.choice3.value=rowClicked.cells(2).inn erText;
document.all.choice4.value=rowClicked.cells(3).inn erText;
document.all.choice5.value=rowClicked.cells(4).inn erText;
//alert("mousemove2");
}

function select()
{
document.Testform.Code.focus();
document.Testform.Code.select();
}

</script>
</head>
<body name="Testform">

<div id="divSelectDragItem1" onmouseout"alert('rowmouseleave')"
style="position:absolute; top:140; left:50; width:100;
background-color:#ccccee;cursor:default">
Drag text from here:<br>
<table border="1" style="width:500">
<tr>
<td><input type="text" name="choice1" onclick="select()"
ondragstart="setSourceIndex(0)" ondrop="orderCarrierChoices(0)"
ondragend="setCarrierChoices(0)"></td>
<td><input type="text" name="choice2" onclick="select()"
ondragstart="setSourceIndex(1)" ondrop="orderCarrierChoices(1)"
ondragend="setCarrierChoices(1)"></td>
<td><input type="text" name="choice3" onclick="select()"
ondragstart="setSourceIndex(2)" ondrop="orderCarrierChoices(2)"
ondragend="setCarrierChoices(2)"></td>
<td><input type="text" name="choice4" onclick="select()"
ondragstart="setSourceIndex(3)" ondrop="orderCarrierChoices(3)"
ondragend="setCarrierChoices(3)"></td>
<td><input type="text" name="choice5" onclick="select()"
ondragstart="setSourceIndex(4)" ondrop="orderCarrierChoices(4)"
ondragend="setCarrierChoices(4)"></td>
</table>
</div>

<table border="1" style="width:500">
<tr onclick="setFields(this)">
<td border="3" cellpadding="2" style="width:50">MCI</td>
<td border="1" cellpadding="2" style="width:50">DE01</td>
<td border="1" cellpadding="2" style="width:50">GB4</td>
<td border="1" cellpadding="2" style="width:50">CWC</td>
<td border="1" cellpadding="2" style="width:50">GB3</td>
</tr>
<tr>
<td border="3" cellpadding="2" style="width:50">AAA</td>
<td border="1" cellpadding="2" style="width:50">BBB</td>
<td border="1" cellpadding="2" style="width:50">CCC</td>
<td border="1" cellpadding="2" style="width:50">DDD</td>
<td border="1" cellpadding="2" style="width:50">EEE</td>
</tr>
</table><br>

<input type="text" name="temp" onchange="alert('changed')">

</body>
</html>

Oct 10 '05 #5
si********@hotmail.com wrote:
Here is the code:

Note I can populate the cells no problem with the new order after you
dragged and dropped the fields.

Click on one of thr rows from the table at the top. It should populate
the fields.

Try dragging the text in field 1 to field 3. You notice that field 1
is missing the text.

I basically need all fields to be populated after the drag drop.
When posting code, don't use tabs, use spaces and indent two (my
preference) or four spaces for each indent.

I created a test case using simplified code based on what I think your
code was doing. Correct me if I'm wrong:

A click on the table row populates the text inputs. Dragging text in
the inputs changes the order in the table row. The text inputs are then
updated from the values in the table - correct?

The problem comes at the end - when you go to read the values from the
table and put them into the fields, the browser isn't ready so some of
the value are missing. You can either use the array of stored values to
update the text fields, or use setTimeout() to delay the text field
update (10ms seems to work fine).

My test code is below.

<html>
<head>
<script language="JavaScript">
The language attribute is depreciated, type is required:

<script type="text/javascript">

var rowClicked;
var sourceIndex=-1;
var currentCarrierList=new Array();
var newCarrierList=new Array();
You can use initialisers here, saves a few keystrokes:

var currentCarrierList=[];
var newCarrierList=[];
var selectedCarrier;
function setSourceIndex(index){
sourceIndex=index;
selectedCarrier=currentCarrierList[index];
}

function orderCarrierChoices(targetIndex){

if(sourceIndex>-1){
//alert("running!!");
var index=0;
for(var x=0;x<currentCarrierList.length;x++){
if(x==targetIndex){
//alert("if "+x+"=="+targetIndex);
//alert("1:"+currentCarrierList[x]);
newCarrierList[index]=currentCarrierList[x];
index++;
//alert("2:"+selectedCarrier);
newCarrierList[index]=selectedCarrier;
index++;
}
else if(sourceIndex!=x){
//alert("else x="+x);
newCarrierList[index]=currentCarrierList[x];
index++;
}
}
}
//alert("x");
//document.all.choice1.value=""; [...]

currentCarrierList=newCarrierList;
*/
//alert("y");
Including huge slabs of commented-out code just wastes space and makes
it harder to find the problem.
}
function setCarrierChoices(index){
//alert("newCarrierList.length:"+newCarrierList.leng th);
for(var x=0;x<newCarrierList.length;x++){
//alert(x+" carrier:"+newCarrierList[x]);
if(x==0){
document.all.choice1.value="";
Even though this is IE-only code (all that ondrag stuff), don't use
document.all, use DOM compliant document.getElementById (you may need to
include a document.all alternative to cover browsers from IE 5, but I
think IE 5.5 onward supports it, certainly IE 6 does).

[...]
function resetRowValues(){
//alert("setFields:"+row.cells(0).innerText);
innerText is a Microsoft proprietary property, the DOM equivalent is
textContent but it's in DOM 3 so not widely supported. You can use
childNode values, or innerHTML and strip out any HTML tags with a
regular expression.

[...]

function select()
{
document.Testform.Code.focus();
document.Testform.Code.select();
To reference the body element, use:

var theBody = (document.documentElement||document.body);

There appears to be no variable or element with either NAME or ID of code.
}

</script>
</head>
<body name="Testform">
There is no name attribute for the body element.

<div id="divSelectDragItem1" onmouseout"alert('rowmouseleave')"
style="position:absolute; top:140; left:50; width:100;


When specifying lengths in styles, you must use units - e.g. em, ex, px.

[...]

Here is some play code:
<html><head><title>Drag n Drop test</title>
<script type="text/javascript">

var startEl;
var endEl;
var valueRow;
var valueValues = [];

function initDragEvents()
{
document.body.ondragstart = function() {
startEl = event.srcElement;
}
document.body.ondrop = function() {
endEl = event.srcElement;
doDrop();
}
}

function doDrop()
{
if ( startEl && startEl.name
&& /input-/.test(startEl.name)){
var startIdx = startEl.name.split('-')[1];
}
if ( endEl && endEl.name
&& /input-/.test(endEl.name)){
var endIdx = endEl.name.split('-')[1];
}
swapArrayValues(valueValues, startIdx, endIdx);
loadRow(valueRow, valueValues);
setTimeout('loadFields(valueRow)',10);
startEl=null;
endEl=null;
}

function swapArrayValues(A, x, y)
{
var tmp = A[x];
A[x] = A[y];
A[y] = tmp;
}

function loadRow(r, A)
{
var i=A.length;
while(i--){
delKids(r.cells[i]);
r.cells[i].appendChild(document.createTextNode(A[i]));
}
}

function delKids(el)
{
while(el.firstChild) el.removeChild(el.firstChild);
}

function loadFields(r)
{
var tCells = r.cells;
valueRow = r;
var f = document.forms['formA'];
for (var i=0, j=tCells.length; i<j; ++i){
valueValues[i] = tCells[i].firstChild.data;
f.elements['input-'+i].value = valueValues[i];
}
}

window.onload=initDragEvents;

</script>

</head>
<body>
Click the row to put the values into the text fields
<table border="1">
<tr onclick="loadFields(this);">
<td>AAA</td><td>BBB</td><td>CCC</td>
</tr>
</table>

<form action="" name="formA">
<input type="text" name="input-0">
<input type="text" name="input-1">
<input type="text" name="input-2">
</form>

</body>
</html>

--
Rob
Oct 10 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Ryan Stewart | last post by:
If you don't want to read this post because of its length, I understand. I've spent two and a half days on this problem and have a good deal of information to relate. And this is kind of a long...
0
by: Lauren Quantrell | last post by:
I'm trying to drop a file from Windows Explorer (or desktop, etc.) onto a field in Access2K and capture the full file path. I found an posting below that says this is possible but I cannot...
2
by: SamSpade | last post by:
There seems to be two ways to put things on the clipboard ( I don't mean different formats): SetClipboardData and OleSetClipboard If I want to get data off the clipboard do I care how it was put...
3
by: Ajay Krishnan Thampi | last post by:
I have a slight problem implementing 'drag and drop' from a datagrid to a tree-view. I have pasted my code below. Someone please advice me on what to do...pretty blur right now. ==code== ...
0
by: Oberon | last post by:
How do I navigate through records using drag 'n' drop controls? I have an example in C# for Windows forms that relies on BindingContext but this is not available for ASP.NET. How do I solve that...
6
by: jojobar | last post by:
Hello, I look at the asp.net 2.0 web parts tutorial on the asp.net web site. I tried to run it under firefox browser but it did not run. If I want to use this feature in a commercial product...
3
by: Goldwind | last post by:
Hi, I"m trying to use drag & drop of text from one text box to another but without suceess. Microsoft presented an example in "101 code samples" BUT in this example the code select and drag all...
3
by: VB Programmer | last post by:
In VB.NET 2005 (winform) any sample code to drag & drop items between 2 listboxes? Thanks!
1
by: patrickq | last post by:
What am trying to achieve is dragging an element from one IFRAME/FRAME into another IFRAME/FRAME. But upon dropping the element, I do not want the target IFRAME/FRAME to open/load it. I want to set...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.