Copy and move icons by dragging and dropping them in unison

I have two bordered spaces for tools and a free space (droppable area). The tool space includes some shapes that can be dragged and dropped into the free space.

One issue I would like to address is regarding cloning. How can I add a clone of icons back into their original position after they are dropped?

Any assistance on this matter would be greatly appreciated. Thank you!

$(function() {
  $(".doitcenter").draggable({
    revert: "invalid",
    handle: ".shapes"
  });
  $(".droppable-area").droppable({
    drop: function(event, ui) {
      ui.draggable.appendTo(this).position({
        my: "center center-5",
        at: "center",
        of: event
      });
    }
  });
  $(".free-space").on("click", ".close-button", function(e) {
    $(this).closest(".doitcenter").remove();
  });
});
.tool-space {
  border: 10px double #005580;
  min-height: 608px;
}

.free-space {
  border: 10px solid #005580;
  min-height: 608px;
}

.free-space .doitcenter {
  width: 40px;
}

.doitcenter {
  text-align: center;
}

.close-button {
  font-size: 24px;
  cursor: pointer;
}

.shapes {
  opacity: 0.8;
  margin-bottom: 10px;
}

.shapes:hover {
  cursor: move;
  opacity: 1;
}
<script src="https://kit.fontawesome.com/6e2154b1f7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
  <div class="row">
    <div class="col-2">
      <div class="tool-space">
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-square fa-2x shapes"></i></span>
        </div>
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-circle fa-2x shapes"></i></span>
        </div>
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-square fa-2x shapes"></i></span>
        </div>
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-circle fa-2x shapes"></i></span>
        </div>
      </div>
    </div>
    <div class="col-10">
      <div class="free-space droppable-area">
      </div>
    </div>
  </div>
</div>

Answer №1

Getting closer! Just remember to add the helper: 'clone' configuration to the draggable element and apply .clone() within the drop function for the element.

$(function() {
  $(".doitcenter").draggable({
    revert: "invalid",
    handle: ".shapes",
    helper: 'clone'
  });
  $(".droppable-area").droppable({
    drop: function(event, ui) {
      if (!$(ui.draggable).hasClass('cloned')) {
        ui.draggable
          .clone()
          .addClass('cloned')
          .appendTo(this)
          .position({
            my: "center center-5",
            at: "center",
            of: event
          })
          .draggable();
       }
    }
  });
  $(".free-space").on("click", ".close-button", function(e) {
    $(this).closest(".doitcenter").remove();
  });
});
.tool-space {
  border: 10px double #005580;
  min-height: 608px;
}

.free-space {
  border: 10px solid #005580;
  min-height: 608px;
}

.free-space .doitcenter {
  width: 40px;
}

.doitcenter {
  text-align: center;
}

.close-button {
  font-size: 24px;
  cursor: pointer;
}

.shapes {
  opacity: 0.8;
  margin-bottom: 10px;
}

.shapes:hover {
  cursor: move;
  opacity: 1;
}
<script src="https://kit.fontawesome.com/6e2154b1f7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
  <div class="row">
    <div class="col-2">
      <div class="tool-space">
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-square fa-2x shapes"></i></span>
        </div>
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-circle fa-2x shapes"></i></span>
        </div>
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-square fa-2x shapes"></i></span>
        </div>
        <div class="ui-widget-content doitcenter mt-2">
          <span class="draggable-item"><span class="close-button">&times;</span><i class="far fa-circle fa-2x shapes"></i></span>
        </div>
      </div>
    </div>
    <div class="col-10">
      <div class="free-space droppable-area">
      </div>
    </div>
  </div>
</div>

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

CSS sidebars are failing to display on the website

Working on a supposedly simple template turned out to be more challenging than expected. The template lacked sidebars, so I attempted to add them myself. However, my test text isn't displaying as intended. Could someone please help me identify the mi ...

How to use jQuery with multiple selectors?

I am attempting to create a feature where multiple links are highlighted when one is clicked. However, I am encountering an issue where only the link that is clicked is being highlighted, rather than all three links. Below is the code snippet: $('#v ...

Is there a way for me to incorporate a feature where the user has the option to choose the number of passwords they would

I created a password generator for my company and now I want to implement the feature where the user can choose how many passwords they want. My attempt at using str_repeat ($output , $password_amount ) resulted in duplicate passwords being generated, mak ...

Retrieving data from JSON attributes in a REST API response

When using the 'get' function in the 'request' node module, I am attempting to access the 'items' array in the response I receive. Despite being able to log the entire response to the console, I encounter an issue when trying ...

What is the process of transforming an object type into a two-dimensional array using lodash?

In order to properly display multiple tables in my Angular project, I am looking to convert an object type into an array of different objects. The object I am working with is as follows: let myObject = { internalValue:{city:"Paris", country:"France", pin ...

Tips on enhancing SauceLabs javascript queries in your selenium testing for faster speeds?

My experience running Selenium tests on the Chrome browser in SauceLabs has been quite frustrating due to the sluggish performance. One of the major issues I have encountered is the significant delay in javascript queries, taking about 200ms to return res ...

Transfer information from frontend to Laravel Controller using AJAX

I am having trouble extracting data from a select row datatable and sending it via AJAX to my Laravel Controller. However, there seems to be an issue as when I do a dump of the request using "dd(request()->all());" in my controller, I only see the token ...

Display an icon to act as a separator between icons in CSS styling

Is there a way to display a spacer line before and after icons (cross symbols) while excluding the spacer line before and after buttons carrying the word "Cancel"? How can this be achieved? This is my CSS file: .Container > *:first-child::before, .Con ...

Creating a clickable map for a PNG image: Step-by-step tutorial

My goal is to create a interactive map similar to this one. Click here for the image ...

RectJs | Extract a parameter value from the url while disregarding any null values

Seeking assistance to retrieve the value of the "fruit" parameter from the URL in reactJs. Consider the following URL structure: http://localhost:3001/buy?fruit=&fruit=1&fruit=&fruit= Any of the four "fruit" parameters may contain a value, wi ...

The jQuery tooltip is appearing hidden behind the modal window

After implementing the JQuery Tooltip on all title elements of my website, I encountered a problem. The tooltip appears behind the modal dialog box when accessed from a popup page. It seems like there is an issue with the z-order of either the tooltips or ...

Retrieving the value of an object based on a dynamic key in Typescript

Currently, I am facing an issue with exporting a single value from a configuration object based on the process.env.NODE_ENV variable. Specifically, I am attempting to retrieve the value of the configEnvs variable like this: configEnvs['local']. H ...

Choose default option with dynamic selection

Is there a way to create a select element with options and have one option marked as 'selected' by default? For instance, consider the following options array: $scope.options = [ { "value": 1, "label": "One", ...

Tips for resolving a sluggish webpage with database content

I am facing an issue with one specific page on my website that contains links to the database. The loading speed of this page is extremely slow and I'm looking for ways to speed it up. I have noticed that even when there are no visitors on the server ...

How to Implement Drag-and-Drop Functionality in AngularJS (with or without the use of jQuery)

Is there a way to achieve the same functionality as this in AngularJS? I am familiar with jQuery but want to transition to AngularJS. Can AngularJS be used to customize directives for tasks like this? I have tried searching, but all I found was this, whic ...

How would you label this particular design pattern in React Components?

Could someone please help me find documentation for this specific pattern? I'm struggling to locate it. Does it have a designated name? The component TextBase is styled in a way that allows me to extend it like so: Text.H1 = withComponent('h1&ap ...

What are the most effective techniques for managing headers, footers, and reusable templates in Node.js/Express views?

Currently, I've got my development environment configured with Node.JS / Express / Pug and I'm in the process of grasping the usage of views & routes. However, I seem to be struggling when it comes to embedding a "reusable" navigation bar and foo ...

The design problem arises from using jQuery to dynamically prepare the table body at runtime

The table row and data are not appearing in the correct format. Here is a link to the problem on Fiddle: http://jsfiddle.net/otc056L9/ Below is the HTML code: <table border="1" style="width: 100%" class="eventtable"> <thead style="color: b ...

Is the phrase "This site was built with Wix" visible on the website?

Recently, I've begun using Wix to build a website. I'm curious - does the message 'This website is created using Wix' appear at the top and bottom of the page when it's published? 'This website is created using Wix' I ...

Tips on concealing JavaScript values from being detected during web inspection

I need to securely pass a secret code from my backend to the front end and store it in my JavaScript script. Here is an example of how I want to achieve this: <script> var code = '<%= code %>' </script> Once the us ...