Preventing attribute or tag cloning in Jquery: What you need to know

I'm having some trouble with JQuery. I want to clone an attribute or tag that is dragged from one div1 to another div2, which is working fine. But the issue arises when I drag or move the position of an existing tag on div2, then the cloning process starts.

I only want the cloning to occur when I drag from div1 to div2. Can someone please point out where I am going wrong and what needs to be corrected?

This is the content of div1

<div class="md-card scroll-style">
                    <div class="draggable-items">
                        <img class="img_style" src="tools_icon/ic_text_format.svg" data-toggle="tooltip" title="Text Input" data-placement="bottom">
                        <div id="text_field_clone" class="draggable_items_hide">
                            <input type="text" name="text_field">
                        </div>
                    </div>
                </div>

This is div2

<div class="droppable_box_style scroll-style" id="droppable-box">

                </div>

This is the JQuery Code

<script type="text/javascript">
        $(document).ready(function () {

            $(".draggable-items").draggable({
                grid: [ 20, 20 ],
                appendTo: '#droppable-box',
                containment: "window",
                cursor: 'move',
                revertDuration: 100,
                revert: 'invalid',
                helper: 'clone'
            });

            $("#droppable-box").droppable({
                accept: ".draggable-items",
                drop: function (event, ui){

                    ui.helper.clone().appendTo('#droppable-box');

                    $("#droppable-box > .draggable-items").find(".img_style").hide();

                    $("#droppable-box > .draggable-items").find("#text_field_clone").removeClass("draggable_items_hide").addClass("show").resizable();

                    $("#droppable-box > .draggable-items").draggable();
                }
            });
            // $('[data-toggle="tooltip"]').tooltip();
        });   
    </script>

My layout looks like this https://i.sstatic.net/DprUV.png

Answer №1

Implement a cloning feature to the Jquery mouseup event:

 $(selector).mouseup(function(){
    //insert cloning function here
    });

View Demo Here

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

What is the best approach to repurpose a component when small adjustments are needed?

Can a customized slider component be created in React that can be reused with slight variations? For example, having the second one include a 13% field. View image description here ...

How can I display an iframe element only if it exists within an object in Angular?

I'm currently exploring options to specifically display the iframe element within a block of HTML content being sent to my Angular application. While I can use a *ngIf directive in my template to check for the presence of the tag, I am unsure of how ...

Is there a way to modify the CSS display property upon clicking a link or button?

I have a ul with the id of "menu-list". The display property is set to "none" in my CSS file, but I want it to switch to "flex" when a link is clicked. I am trying to use the click event on the link to change the display prop ...

differentiating between user click and jquery's .click() method

There are <a href=".. tags on a page with an inline onclick attribute. If a user clicks one without being logged in, they will be prompted to log in. After logging in and the page refreshes, jQuery will trigger .click() on the <a> element to redir ...

Tips on transforming a JSON file into a response for my personal server

After successfully converting an Excel file to JSON format using my code, I encountered a challenge when trying to convert this as a response. Despite attempting to use res.send in the JS code, it only displayed directory/inner codes instead of a response. ...

Move my site content to the appropriate location

I am working on a single-paged website built with Jquery and HTML. The main content is housed within a div called #site-content, which has a width of 4400px. Each "page" is positioned within this div, with the first page starting at left: 0px, the second a ...

What steps can be taken to convert a list box into an editable box?

I created a listbox using a table because I needed to display two columns for the list. Now, I am attempting to enable editing the text directly within the table when I select an item from the listbox. Essentially, I want the selected item to become an edi ...

Utilizing a segment of one interface within another interface is the most effective method

In my current project using nextjs and typescript, I have defined two interfaces as shown below: export interface IAccordion { accordionItems: { id: string | number; title: string | React.ReactElement; content: string | React. ...

When utilizing the image upload AJAX feature, duplicates of the uploaded images may appear without reloading the page

Currently grappling with a peculiar issue involving an ajax upload script embedded in a form loaded within a modal. Let me break down the strange behavior: Upload image 1 No problems encountered here. Upload image 2 Encountering issues whereby two id ...

What is the best way to establish and maintain lasting connections with the Firebase database while utilizing the superagent

Currently, I am following the Firebase Functions documentation on enhancing Firebase database performance. I have provided the code snippet below for your reference. const request = require('superagent'); const functions = require('fireba ...

The Vuex store variable is being accessed prior to being populated with information retrieved from the API

I am currently attempting to retrieve data from an API using Vuex. Below is the action function in the Vuex store: async getEpisodeFromApi({ commit }, id) { const data = { id }; return await axios.get(Api.getUrl(data)).then((res ...

Instead of using a computed getter/setter, make use of mapState and mapMutations to simplify

Currently, I am syncing a computed value to a component and using a computed setter when it syncs back from the component. I'm wondering if there is a more concise way to replace a computed getter/setter with mapState and mapMutations. How can this b ...

Ways to retrieve the output parameter in the node mssql

` request.input('xyz',sql.Int,1); request.input('abc',sql.Numeric,2); request.output('pqr',sql.Int); request.output('def',sql.Char); request.execute('[StoredProcedure]',function(err,recor ...

Guidelines for choosing and uploading a file using Ionic

Is there a way to upload a PDF file to a server using the $cordovaFileTransfer plugin? I currently have an input field like this: <input type="file" onchange="angular.element(this).scope().fileNameChanged(this)"> How can I retrieve the pathForFile ...

Incorporate jQuery into Laravel 5.4 mix for enhanced functionality

After being familiar with Laravel 5.1 mix (elixir), I decided to give Laravel 5.4 mix a try. I combined my libraries into vendor files. mix .styles([ './node_modules/bootstrap/dist/css/bootstrap.css', './node_modules/font-awesome/c ...

Adjust the dimensions of the dropdown menu

Objective: How can I adjust the width of a select dropdownlist that is utilizing bootstrap v2? Challenge: I am uncertain about how to modify the width in the context of bootstrap. Additional Information: Keep in mind that there are three dropdownli ...

Using Javascript to parse a regular expression in a string

I am facing a challenge with a JavaScript string that contains contact information that needs to be filtered. For example, I want to mask any email or phone number in the message. I have attempted the following approach: function(filterMessage) { ...

The utilization of CSS variables within intricate properties

Imagine having a CSS property called box-shadow: box-shadow: 5px 5px 0 #ccc; What if there is a need to create a variable from the color #ccc? While in SCSS, you could accomplish this with code like: $grey: #ccc; .element { box-shadow: 5px 5px 0 $gre ...

What is the best way to eliminate blank values ("") from an array?

I am working with a two-dimensional array that was generated from an HTML table using jQuery, but I have noticed that some values are empty and are displaying as "". How can I go about removing these empty values from the array? <table> ...

A guide on utilizing nodejs to automatically open the default browser and direct it to a specific web address

I am currently developing a program using Node.js. One of the features I aim to implement is the ability to launch the default web browser and direct it to a particular URL. I want this functionality to be compatible across Windows, Mac, and Linux operat ...