Finding Curosr Position Using JavaScript and Drag and Drop Values

Introduction:

I am going to explain about javascript code for Drag  from ASP.Net ListBox and to Drop in the specific Cursor location of TextArea .

Solution:

A ListBox having some Parameters or values which refers the corresponding database records.We have to  Drag the valuesfrom ListBox  and  Drop in the  TextArea . In Text area we have to find the cursor position and Drop the Values from ListBox. 

ASPX Code:

    Email Message:
  <asp:TextBox ID="txtMsg" runat="server" TextMode="MultiLine" Rows="10" Columns="50"   onclick="storeCur(this);" onkeyup="storeCur(this);" onselect="storeCur(this);"></asp:TextBox>
                               
 List Values:
<asp:ListBox ID="lstParameter" runat="server"    DataTextField="db_Values" DataValueField="db_Names" onmousedown="d = new drag(this)"
onmouseup="d.drop(this.form.txtMsg)" onmouseout="if (typeof d != 'undefined') d.setIndex()"> </asp:ListBox>

JavaScript Code:

 <script language="javascript" type="text/javascript">
               function storeCur(txtMsg)
               {
                   if (txtMsg.createTextRange) 
                     txtMsg.caretPos = document.selection.createRange().duplicate();
               }
                function drag(objSource) 
                {
               this.select = objSource;
             }
                function drag.prototype.drop(objDest) 
                {
                if (!this.dragStart) return;
                this.dest = objDest;
      var pt=this.option.cloneNode(true);
                   if (objDest.createTextRange && objDest.caretPos) 
                     {                             
                               var caretPos = objDest.caretPos;
                               if(caretPos.text.charAt(caretPos.text.length - 1) == '')
                               {                                   
                                    caretPos.text =  pt.value;
                               }                 
                  }
        function drag.prototype.setIndex() 
        {
         var i = this.select.selectedIndex;
         window.status="selectedIndex = "+i;
         if (i==-1) return;
         this.option = this.select.options[i];
         this.dragStart=true;
        }
   if (myField.selectionStart || myField.selectionStart == ‘0')
    {
       var startPos = myField.selectionStart;
       var endPos = myField.selectionEnd;
      myField.value = myField.value.substring(0, startPos)+ myValue
    + myField.value.substring(endPos, myField.value.length);
    } 
  else 
   {
   myField.value += myValue;
   }
   }       
    </script>

Conclusion

Finally we find out the solution for Drag and Drop from Webcontrols and Locating the Cursor position.


If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.