Drag drop text in field

Discussion in 'Javascript' started by simon_s_li@hotmail.com, Oct 9, 2005.

  1. Guest

    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, 2005
    #1
    1. Advertising

  2. RobG Guest

    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
    RobG, Oct 9, 2005
    #2
    1. Advertising

  3. Guest

    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, 2005
    #3
  4. RobG Guest

    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
    RobG, Oct 9, 2005
    #4
  5. Guest

    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.length);
    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).innerText;
    document.all.choice2.value=rowClicked.cells(1).innerText;
    document.all.choice3.value=rowClicked.cells(2).innerText;
    document.all.choice4.value=rowClicked.cells(3).innerText;
    document.all.choice5.value=rowClicked.cells(4).innerText;
    //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, 2005
    #5
  6. RobG Guest

    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.length);
    > 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);
    r.cells.appendChild(document.createTextNode(A));
    }
    }

    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 = tCells.firstChild.data;
    f.elements['input-'+i].value = valueValues;
    }
    }

    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
    RobG, Oct 10, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Oliver Klein
    Replies:
    0
    Views:
    675
    Oliver Klein
    Aug 24, 2003
  2. ehm
    Replies:
    2
    Views:
    195
  3. Wang, Jay
    Replies:
    5
    Views:
    455
    Wang, Jay
    May 25, 2004
  4. Sound
    Replies:
    2
    Views:
    426
    Randy Webb
    Sep 28, 2006
  5. jr
    Replies:
    3
    Views:
    405
Loading...

Share This Page