Javascript: Getting a Drag and Dropped item to put a value into a Textbox

Posted on 2011-05-11
Medium Priority
Last Modified: 2012-06-27

I am trying to insert a generated tag like <Gallery/> into a textbox, after an item called Gallery has been dragged and dropped into the textbox. I've researched using SetSelection() and half a dozen other methods, but they all seem far too complicated or unlikely to work properly.

The code I am using is a slightly modified version of Wicked Code from http://msdn.microsoft.com/en-us/magazine/cc135985.aspx.

At the heart of the matter, I will have something like this:
       <div id="RedDragSource" class="unselectable">Gallery</div>

That gives the appearance of dragging and dropping just fine. However, putting the value "<Gallery/>" into a Textbox is an altogether different matter. How do I put the text into a plain jane TextBox at the mouse cursor?

And should I store the value "<Gallery.>" somewhere inside the <div> ,in a hidden field so I can modify it later?


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DragDropDemo.aspx.cs" Inherits="DragDropDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.NET AJAX Drag-Drop Demo</title>
    .unselectable {     -moz-user-select: -moz-none;     -khtml-user-select: none;     -webkit-user-select: none;     -o-user-select: none;     user-select: none; } 
    <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
                    <asp:ScriptReference Name="PreviewScript.js" Assembly="Microsoft.Web.Preview" />
                    <asp:ScriptReference Name="PreviewDragDrop.js" Assembly="Microsoft.Web.Preview" />
                    <asp:ScriptReference Path="~/Scripts/ColorDragDrop.js" />
                <legend>Pick a Control</legend>
                <table cellpadding="8" style="cursor:pointer">
                        <!-- Drag sources -->
                            <div id="RedDragSource" class="unselectable">Gallery</div>
                            <div id="YellowDragSource" style=" height: 32px; background-color: yellow">Image</div>
                            <div id="GreenDragSource" style=" height: 32px; background-color: green">String</div>
                            <div id="MagentaDragSource" style=" height: 32px; background-color: magenta">Integer</div>
                            <div id="BlueDragSource" style=" height: 32px; background-color: blue">File</div>
            <div style="width: 100%; height: 128px">
                <!-- Drop target -->
                <div id="DropTarget" style="width: 100%; height: 196px">

            <script type="text/javascript">
            function pageLoad()
                // Make the "DragSource" DIVs drag sources.
                var source1 = new Custom.UI.ColorDragSourceBehavior
                    ($get('RedDragSource'), 'red');
                var source2 = new Custom.UI.ColorDragSourceBehavior
                    ($get('YellowDragSource'), 'yellow');
                var source3 = new Custom.UI.ColorDragSourceBehavior
                    ($get('GreenDragSource'), 'green');
                var source4 = new Custom.UI.ColorDragSourceBehavior
                    ($get('MagentaDragSource'), 'magenta');
                var source5 = new Custom.UI.ColorDragSourceBehavior
                    ($get('BlueDragSource'), 'blue');


                // Make the "DropTarget" DIV a drop target.
                var target = new Custom.UI.ColorDropTargetBehavior


Open in new window

Question by:rossryan
LVL 10

Accepted Solution

MaxOvrdrv2 earned 2000 total points
ID: 35746263
yes... use the div itself, and set a property in the click event for it... something like this:

<div id="RedDragSource" class="unselectable" onClick="JavaScript:SelectedTag='<Gallery>';">Gallery</div>

(SelectedTag being a global JS var)

as for getting the current cursor position and placing the tag in there, here's a useful link:
LVL 19

Expert Comment

by:Amandeep Singh Bhullar
ID: 37514241
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month14 days, 8 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question