Finding Curosr Position Using JavaScript and Drag and Drop from WebControls

Majith
Posted by in JavaScript category on for Advance level | Views : 18532 red flag
Rating: 1.5 out of 5  
 2 vote(s)

I am going to explain about javascript code for Drag from ASP.Net ListBox and to Drop in the specific Cursor location of TextArea .
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.

Page copy protected against web site content infringement by Copyscape

About the Author

Majith
Full Name: Majith Basha
Member Level:
Member Status: Member
Member Since: 7/18/2008 11:49:59 PM
Country:



Login to vote for this post.

Comments or Responses

Posted by: LilMoke on: 11/21/2011 | Points: 25
I am fairly new to Javascript and could not get this to work. Any help would be appreciated. What you describe is exactly what I need to do for a project of mine. Could you post working code, or verify that what is here works? It does not appear to be correct.

Thank you
Posted by: Yemulss on: 1/2/2012 | Points: 25
I used following 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>




This code doesnot give any error but it is not working. The selected list item cann’t be dragged from listbox to textbox.
Can you please help me understand what might be going wrong. I am trying this on Window XP Sp2 PC , .net framework 2.0

thanks in advance for the nice article and sample code.

Regards
sham

Login to post response

Comment using Facebook(Author doesn't get notification)