Having trouble with dragging and dropping items into a text box on an HTML page?

Is there a way in HTML to drag and drop elements from one div to another div's textbox?

In the image above, we can see Div1 and Div2. I need to drag text/words from Div1 and drop them into the TEXT BOX in Div2.

How can I implement this functionality in an HTML page for my project?

EDIT :: 18_7_2014

After following Pranav's solution, my updated code is shown below:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script>

$(document).ready(function() {
    $(".draggable").draggable({
        revert: true,
        helper: 'clone',
        start: function(event, ui) {
            $(this).fadeTo('fast', 0.5);
        },
        stop: function(event, ui) {
            $(this).fadeTo(0, 1);
        }
    });

    $("#droppable").droppable({
        drop: function(event, ui) {
            this.value = $(ui.draggable).text();
        }
    });
});


</script>

</head>

 <body>

 <div id="sub_cag" style="display:none; margin-left:35px; margin-top:25px; font-family:Arial, Helvetica, sans-serif;">


<span class="draggable"   >sub</span><br>

 <span class="draggable" >sub</span><br>

 <span class="draggable"   >sub</span><br>

 <span class="draggable" >sub</span><br>

 <span class="draggable"   >sub</span><br>

 <span class="draggable" >sub</span><br>

 </div>   

 <div id="droppableHolder" style=" height:400px; width:580px; margin:10px; ">

 <div style="height: 250px; width:580px; margin:0px;">

<div style=" height:60px; width:250px; margin-top:50px; float:; margin-left:0px;">

 <label for="departmant_name" style="margin-left:0px; font-size: 12px;;font-weight:500;font-family:Arial, Helvetica, sans-serif;">Department Name</label>
 <input  type="text" maxlength="25"  id="droppable" style="width:200px;float:left;font-size: 12px;font-size: 12px;height: 15px; border-radius:5px; border: solid #dddddd 2px; font-size:12px;">
</div>

<div style=" height:60px; width:250px; margin-top:0px; float:left; margin-left:0px;">

 <label for="discription" style="margin-left:0px; font-size: 12px;;font-weight:500;font-family:Arial, Helvetica, sans-serif;">Discription</label>
 <input  type="text" maxlength="25"  id="droppable" style="width:200px;font-size: 12px;font-size: 12px;height: 40px; border-radius:5px; border: solid #dddddd 2px; font-size:12px;">
</div>

<div style=" height:60px; width:220px; margin-top:-60px; float:right; margin-left:0px;">

 <label for="sub_department" style="margin-left:0px; font-size: 12px;;font-weight:500;font-family:Arial, Helvetica, sans-serif;">Sub Department</label>
 <input  type="text" maxlength="25" id="droppable"  style="width:200px;font-size: 12px;font-size: 12px;height: 15px; border-radius:5px; border: solid #dddddd 2px; font-size:12px;">
 <button value="ADD"   style="height:20px; width:40px; margin-top:px;"> </button>
</div>

</body>

When the browser tries to execute the line $(document).ready(function()), it generates an error with message "$ is not defined."

javascriptjqueryhtmlcss

Answer №1

If you're searching for a solution similar to this concept:

$(document).ready(function() {
    $(".draggable").draggable({
        revert: true,
        helper: 'clone',
        start: function(event, ui) {
            $(this).fadeTo('fast', 0.3);
        },
        stop: function(event, ui) {
            $(this).fadeTo(0, 1);
        }
    });

    $("#droppable").droppable({
        drop: function(event, ui) {
            this.value = $(ui.draggable).text();
        }
    });
});

Check it out on JSFiddle : http://jsfiddle.net/abc123/456/

Answer №2

The response above suggests using the Id element for the droppable div section, as it is unique. However, replacing it with Class can allow for dropping into multiple div boxes based on your needs.

Below is the revised code snippet:

$(function() {
 $(".draggable").draggable({
    revert: true,
    helper: 'clone',
    start: function(event, ui) {
        $(this).fadeTo('fast', 0.5);
    },
    stop: function(event, ui) {
        $(this).fadeTo(0, 1);
    }
});

$(".droppable").droppable({
    drop: function(event, ui) {
        this.value = $(ui.draggable).text();
    }
 });
});

Fiddle: http://jsfiddle.net/5DCZw/942/

Answer №3

Make sure to include the "jquery.min.js" script file in your code as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to conceal an element using identical markup with jquery?

Having trouble with two custom dropdown lists that share the same markup. Ideally, only one should be visible at a time. However, both are currently opening simultaneously. Additionally, I need them to close when clicking outside of the list. It's ne ...

javascriptjqueryhide

Steps to show the default value in a text box and add additional input after clicking a button

Hello there! I need help with my HTML project again. In my script, I have a button command to display input values in boxes. I want these input boxes to show default values of Model, IMEI, and Serial when no input is detected upon button click. And when ...

html

Enable compatibility with high resolution screens and enable zoom functionality

My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements prop ...

javascriptcssresponsive-design

Creating code in AngularJS

I have the following template structure: <h1 class="text-center" ng-bind-html="row.text"></h1> When the content of my row.text is a string like this: Hi your name is {{ name }} It will display as shown below: Hi your name is {{ name }} ...

javascriptangularjstemplatesframeworksclient-side

`troubles integrating external modules in nuxt application`

Just starting with nuxt and incorporating it with vuetify. My aim was to integrate a Google Places Autocomplete feature, so I stumbled upon this: vuetify-google-autocomplete. It seemed simple enough to implement. But turns out it's not that straightfo ...

javascriptvue.jsnuxt.js

Implementing array.includes in a Vue.js project

I am currently working on a Vue app where I need to display or hide values based on selected options from a multiselect. So far, everything is functioning correctly with the select and the corresponding function it calls. However, I encountered an issue w ...

javascriptvue.js

Utilizing ng-bind-html to establish Angular bindings within the HTML code

My scenario involves hitting a specific route (#/abc) and then making a POST request to the server to render the HTML received as a response. Instead of embedding this logic directly into $routeProvider.when, I came up with my own solution. This is how I ...

javascriptangularjs

Utilizing HTML5/JavaScript to send a text message from a mobile device

I am developing a mobile web application to be downloaded from various markets with a mini web server, capable of running on any operating system such as iOS, Android, Windows8, and more. My goal is to make the application as OS-independent as possible by ...

javascriptandroidioshtmlwindows-8

Can you confirm if the content-type of this SOAP response is valid?

While trying to utilize a third-party WebService within Visual Studio 2008, I received a unique response from the server. This particular response contained two content-type tags. HTTP/1.0 200 OK Server: SMBDK_1/2.3.0 Date: Thu, 09 Aug 2012 18:59:14 G ...

htmlwcfsoapwsdl

Utilizing $http (REST) to send information from a form

Struggling to leverage Angular for CRUD processes, especially encountering difficulties with POST requests to the server. This is my controller: angular.module('myModule').controller("ListingCtrl", function($scope, posts) { $scope.addProje ...

javascriptangularjsrestcrudangular-services

Using Vue.js, perform calculations on various fields within an array of objects generated by the v-for directive

I am currently learning Vue.js and I have implemented a v-for loop to iterate through an array of objects. However, I now need to calculate a specific field (precoPorKg) within this loop. In order to perform this calculation, the input item.quantidade mus ...

javascriptvue.jsvuejs2

Using JQuery for sending POST requests in JavaScript

I am currently facing an issue while trying to post JSON data to a server. I have managed to do it successfully using a certain method, which is as follows: <html> <head> <script src="http://code.jquery.com/jquery-latest.min.js">< ...

javascriptjqueryajaxjson

Access account and refresh user document when onAuthStateChange occurs

When signing in to Firebase and updating the user doc using merge: true, an issue arises when the onAuthStateChanged listener is also active. This listener detects new logins and then reads the user doc, causing potential conflicts. Upon further inspectio ...

javascriptfirebasegoogle-cloud-firestore

Utilize Vue JS to trigger a query when an option is selected in a drop-down select

I'm new to Vue and facing a challenge. I have multiple drop-down select menus that fetch data from an Axios request. The select only responds when I click the submit button. I want it to update when the user makes a selection from the drop-down. I can ...

javascriptvue.js

Retrieve the position of an element using Python and selenium

Currently, I am working on a project and need to extract the location and size of an element using the following xpath: "//div[@class='titlu']" https://i.sstatic.net/PI1QE.png Upon inspection, it appears that the element is visible with no dist ...

pythonhtmlseleniumselenium-webdriver

AngularJS combined with MVC is causing an issue where the table fails to refresh following an HTTP post request

When working with an $http.post() call and trying to update an HTML table in the success() callback, I encountered an issue: .success(function (data) { $scope.categories.push(data); }); Here is the HTML code for the table: <tbody> ...

javascriptangularjsasp.net-mvcangularjs-ng-repeat

Conditional logic in Gravity Forms enhanced with Date Picker functionality

I've been faced with a challenge when it comes to gravity forms for quite some time now. I'm seeking a way to establish conditional logic based on the day selected by users. Each day of the week should have its own set of options, prioritizing th ...

phpjquerywordpress

Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/ The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expan ...

css

What is the best way to ensure all of my paragraphs are properly centered when using the display:

I'm currently in the process of constructing my portfolio website. One element I am focusing on is ensuring that the Heading and paragraphs on my About page are centralized on the screen, with text wrapping when there is limited screen space for bette ...

htmlcssbootstrap-5

ASP.Net listview that allows users to click on rows to highlight the selected item

Every row in my ASP.net list view is made up of multiple components enclosed in a <div>. I have a two-part question: How can I make these rows clickable to utilize the SelectedIndexChanged event and load data in another user control based on the ...

jqueryasp.netlistview