Drag drop text in field

simon_s_li

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

Subscribe Reply

2991

RobG

si********@hotm ail.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(arra yRef, idx1, idx2)
{
var temp = arrayRef[idx1];
arrayRef[idx1] = arrayRef[idx2];
arrayRef[idx2] = temp;
}

--
Rob

Oct 9 '05 #2

simon_s_li

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

RobG

si********@hotm ail.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

simon_s_li

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="JavaS cript">

var rowClicked;
var sourceIndex=-1;
var currentCarrierL ist=new Array();
var newCarrierList= new Array();
var selectedCarrier ;
function setSourceIndex( index){
sourceIndex=ind ex;
selectedCarrier =currentCarrier List[index];
}

function orderCarrierCho ices(targetInde x){

if(sourceIndex>-1){
//alert("running! !");
var index=0;
for(var x=0;x<currentCa rrierList.lengt h;x++){
if(x==targetInd ex){
//alert("if "+x+"=="+target Index);
//alert("1:"+curr entCarrierList[x]);
newCarrierList[index]=currentCarrier List[x];
index++;
//alert("2:"+sele ctedCarrier);
newCarrierList[index]=selectedCarrie r;
index++;
}
else if(sourceIndex! =x){
//alert("else x="+x);
newCarrierList[index]=currentCarrier List[x];
index++;
}
}
}
//alert("x");
//document.all.ch oice1.value="";
//document.all.ch oice2.value="";
//document.all.ch oice3.value="";
//document.all.ch oice4.value="";
//document.all.ch oice5.value="";
/*
for(var x=0;x<newCarrie rList.length;x+ +){
alert(x+" carrier:"+newCa rrierList[x]);
if(x==0){
document.all.ch oice1.value="";
document.all.ch oice1.value=new CarrierList[0];
//alert(x+" carrier:"+docum ent.all.choice1 .value);
}
else if(x==1){
document.all.ch oice2.value="";
document.all.ch oice2.value=new CarrierList[1];
//alert(x+" carrier:"+docum ent.all.choice2 .value);
}
else if(x==2){
document.all.ch oice3.value=new CarrierList[2];
//alert(x+" carrier:"+docum ent.all.choice3 .value);
}
else if(x==3){
document.all.ch oice4.value=new CarrierList[3];
//alert(x+" carrier:"+docum ent.all.choice4 .value);
}
else if(x==4){
document.all.ch oice5.value=new CarrierList[4];
//alert(x+" carrier:"+docum ent.all.choice5 .value);
}
}

currentCarrierL ist=newCarrierL ist;
*/
//alert("y");
}
function setCarrierChoic es(index){
//alert("newCarri erList.length:" +newCarrierList .length);
for(var x=0;x<newCarrie rList.length;x+ +){
//alert(x+" carrier:"+newCa rrierList[x]);
if(x==0){
document.all.ch oice1.value="";
document.all.ch oice1.value=new CarrierList[0];
//alert(x+" carrier:"+docum ent.all.choice1 .value);
}
else if(x==1){
document.all.ch oice2.value="";
document.all.ch oice2.value=new CarrierList[1];
//alert(x+" carrier:"+docum ent.all.choice2 .value);
}
else if(x==2){
document.all.ch oice3.value=new CarrierList[2];
//alert(x+" carrier:"+docum ent.all.choice3 .value);
}
else if(x==3){
document.all.ch oice4.value=new CarrierList[3];
//alert(x+" carrier:"+docum ent.all.choice4 .value);
}
else if(x==4){
document.all.ch oice5.value=new CarrierList[4];
//alert(x+" carrier:"+docum ent.all.choice5 .value);
}
}

currentCarrierL ist=newCarrierL ist;
sourceIndex=-1;
resetRowValues( );
//alert("end");
document.all.te mp.value="qwert y";
}

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

rowClicked.cell s(0).innerText= currentCarrierL ist[0];
rowClicked.cell s(1).innerText= currentCarrierL ist[1];
rowClicked.cell s(2).innerText= currentCarrierL ist[2];
rowClicked.cell s(3).innerText= currentCarrierL ist[3];
rowClicked.cell s(4).innerText= currentCarrierL ist[4];
}

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

rowClicked=row;

document.all.ch oice1.value=row .cells(0).inner Text;
document.all.ch oice2.value=row .cells(1).inner Text;
document.all.ch oice3.value=row .cells(2).inner Text;
document.all.ch oice4.value=row .cells(3).inner Text;
document.all.ch oice5.value=row .cells(4).inner Text;

currentCarrierL ist[0]=row.cells(0).i nnerText;
currentCarrierL ist[1]=row.cells(1).i nnerText;
currentCarrierL ist[2]=row.cells(2).i nnerText;
currentCarrierL ist[3]=row.cells(3).i nnerText;
currentCarrierL ist[4]=row.cells(4).i nnerText;
}

function setFields2(){
//alert("mousemov e2");
document.all.ch oice1.value=row Clicked.cells(0 ).innerText;
document.all.ch oice2.value=row Clicked.cells(1 ).innerText;
document.all.ch oice3.value=row Clicked.cells(2 ).innerText;
document.all.ch oice4.value=row Clicked.cells(3 ).innerText;
document.all.ch oice5.value=row Clicked.cells(4 ).innerText;
//alert("mousemov e2");
}

function select()
{
document.Testfo rm.Code.focus() ;
document.Testfo rm.Code.select( );
}

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

<div id="divSelectDr agItem1" onmouseout"aler t('rowmouseleav e')"
style="position :absolute; top:140; left:50; width:100;
background-color:#ccccee;c ursor:default">
Drag text from here:<br>
<table border="1" style="width:50 0">
<tr>
<td><input type="text" name="choice1" onclick="select ()"
ondragstart="se tSourceIndex(0) " ondrop="orderCa rrierChoices(0) "
ondragend="setC arrierChoices(0 )"></td>
<td><input type="text" name="choice2" onclick="select ()"
ondragstart="se tSourceIndex(1) " ondrop="orderCa rrierChoices(1) "
ondragend="setC arrierChoices(1 )"></td>
<td><input type="text" name="choice3" onclick="select ()"
ondragstart="se tSourceIndex(2) " ondrop="orderCa rrierChoices(2) "
ondragend="setC arrierChoices(2 )"></td>
<td><input type="text" name="choice4" onclick="select ()"
ondragstart="se tSourceIndex(3) " ondrop="orderCa rrierChoices(3) "
ondragend="setC arrierChoices(3 )"></td>
<td><input type="text" name="choice5" onclick="select ()"
ondragstart="se tSourceIndex(4) " ondrop="orderCa rrierChoices(4) "
ondragend="setC arrierChoices(4 )"></td>
</table>
</div>

<table border="1" style="width:50 0">
<tr onclick="setFie lds(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

RobG

si********@hotm ail.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="JavaS cript">
The language attribute is depreciated, type is required:

<script type="text/javascript">

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

var currentCarrierL ist=[];
var newCarrierList=[];
var selectedCarrier ;
function setSourceIndex( index){
sourceIndex=ind ex;
selectedCarrier =currentCarrier List[index];
}

function orderCarrierCho ices(targetInde x){

if(sourceIndex>-1){
//alert("running! !");
var index=0;
for(var x=0;x<currentCa rrierList.lengt h;x++){
if(x==targetInd ex){
//alert("if "+x+"=="+target Index);
//alert("1:"+curr entCarrierList[x]);
newCarrierList[index]=currentCarrier List[x];
index++;
//alert("2:"+sele ctedCarrier);
newCarrierList[index]=selectedCarrie r;
index++;
}
else if(sourceIndex! =x){
//alert("else x="+x);
newCarrierList[index]=currentCarrier List[x];
index++;
}
}
}
//alert("x");
//document.all.ch oice1.value=""; [...]

currentCarrierL ist=newCarrierL ist;
*/
//alert("y");
Including huge slabs of commented-out code just wastes space and makes
it harder to find the problem.
}
function setCarrierChoic es(index){
//alert("newCarri erList.length:" +newCarrierList .length);
for(var x=0;x<newCarrie rList.length;x+ +){
//alert(x+" carrier:"+newCa rrierList[x]);
if(x==0){
document.all.ch oice1.value="";
Even though this is IE-only code (all that ondrag stuff), don't use
document.all, use DOM compliant document.getEle mentById (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("setField s:"+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.Testfo rm.Code.focus() ;
document.Testfo rm.Code.select( );
To reference the body element, use:

var theBody = (document.docum entElement||doc ument.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="divSelectDr agItem1" onmouseout"aler t('rowmouseleav e')"
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><ti tle>Drag n Drop test</title>
<script type="text/javascript">

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

function initDragEvents( )
{
document.body.o ndragstart = function() {
startEl = event.srcElemen t;
}
document.body.o ndrop = function() {
endEl = event.srcElemen t;
doDrop();
}
}

function doDrop()
{
if ( startEl && startEl.name
&& /input-/.test(startEl.n ame)){
var startIdx = startEl.name.sp lit('-')[1];
}
if ( endEl && endEl.name
&& /input-/.test(endEl.nam e)){
var endIdx = endEl.name.spli t('-')[1];
}
swapArrayValues (valueValues, startIdx, endIdx);
loadRow(valueRo w, valueValues);
setTimeout('loa dFields(valueRo w)',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(do cument.createTe xtNode(A[i]));
}
}

function delKids(el)
{
while(el.firstC hild) 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.dat a;
f.elements['input-'+i].value = valueValues[i];
}
}

window.onload=i nitDragEvents;

</script>

</head>
<body>
Click the row to put the values into the text fields
<table border="1">
<tr onclick="loadFi elds(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

Similar topics

4953

drag & drop + appendChild + Mozilla = problem

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 shot, but I'm just hoping someone here has experienced a similar problem and has a better idea of what's going on than I do. First, I've tested this in IE 6.0, Netscape 7.2, Mozilla 1.75, and Firefox 1.0. It works fine in IE (even though I was...

Javascript

2594

Drop and Drag in Access2K from Windows

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 simutate it. Can anyone help? Thanks ************************** previous post: Message 1 in thread

Microsoft Access / VBA

4321

Confused about Drag/Drop

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 there? What about Drag/Drop; is there more than one way for the source to make data available Is it always OLE?

C# / C Sharp

10402

drag and drop from a DataGrid

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== using System; using System.Drawing; using System.Collections; using System.ComponentModel;

C# / C Sharp

1530

How do I navigate through records using drag 'n' drop controls?

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 problem? PS: I don't need a code example showing me how to do it without drag 'n' drop because I already know how. I WANT to learn how to do it with drag 'n' drop.

ASP.NET

3545

Drag and drop in web parts...

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 where the user can run on firefox/mozilla, what would be a good approach. 1. Should I overwrite the javascript code drag-and-drop to make it more browser independent. If I want to go this route, can anybody provide me a

ASP.NET

3874

Drag & Drop

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 the text in the TextBox, wether the user wants or not. I need to drag only the selected text (changing the example causes it not to work).

Visual Basic .NET

10586

VB.NET 2005 - Drag & drop between listboxes

by: VB Programmer | last post by:

In VB.NET 2005 (winform) any sample code to drag & drop items between 2 listboxes? Thanks!

Visual Basic .NET

3825

Drag & drop between IFRAMEs / Firefox

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 the data type to "text" at the source, so that the drop operation simply drops a set text string onto a target text entry field. Under IE, when dragging an object, it is possible to catch the “dataTransfer.setData” event to set up the data to be...

Javascript

8347

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8275

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

8792

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

6157

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

4143

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4280

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2696

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1905

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

1585

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General