Move a div by dragging and dropping it without creating duplicates

I'm in need of some assistance. It seems like a simple task, but I'm having trouble finding a solution.

I've managed to create draggable elements that work smoothly without any issues. The drag and drop functionality is working perfectly.

However, I've encountered a problem:

When I drag a box (which is a div), I see two copies of it on my screen - one at its original position and one moving with my mouse.

My goal is to make the original box disappear as soon as I start dragging it. I only want the dragging box to be visible on the screen.

I'm using CodeIgniter as my framework and JavaScript for the drag and drop features. I haven't incorporated jQuery due to my limited understanding of it.

Any help would be greatly appreciated.

javascripthtmlcss

Answer №1

What is the purpose of using clone in this context? I am having trouble understanding. I have created a DEMO on jsfiddle using native JavaScript that might be helpful.

ZxDrugProto._druging = function(e) {
    this.top = e.clientY - this.preY + this.top;
    this.left = e.clientX - this.preX + this.left;
    this.dom.style.top = this.top+'px';
    this.dom.style.left = this.left+'px';
    this.preY = e.clientY;
    this.preX = e.clientX;
}

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

Sophisticated filter - Conceal Ancestry

Check out this snippet of my HTML: <td> <a class="button" href="#"> <input id="download">...</input> </a> <a class="button" href="#"> <input id="downloadcsv">...</input> </a> </td> I am ...

javascriptcss

Looking to incorporate jQuery Form Wizard with mandatory radio button groups?

Currently, I am utilizing the jQuery Form Wizard plugin from The Code Mine website to transform a form into a wizard format. Myform consists of five pages, each containing approximately four radio buttons. It is crucial that at least one radio button on ea ...

javascriptjqueryformsvalidation

Inquiries regarding the functionality of passport.js, particularly concerning the user.id implementation

In my model, doc, or record, there is no field labeled as id. So, how is it possible that done(null, user.id) works? I do have an _id but not an id. It seems like a passport object is being added to my session with the _id of the user in the database. But ...

javascriptnode.jsmongodbexpresspassport.js

Having trouble retrieving the .html() content from the <label> element

Check out the code below: $('.size_click').click(function () { $(this).closest('span').toggleClass('active_size'); $('.selected_sizes').append($(this).closest('label').html()); }); There are multiple ...

javascriptjquery

File is indicating a status of 200 ok, however it is not being displayed on the screen (node.js, expressjs)

I'm trying to display a video file in the browser and access it like an API on my front end. My goal is to have my front end call the video using a simple <video> tag. <video> <source ="video/randomfile.mov" type="video/mov"> < ...

javascriptnode.jsexpress

Adding an interactive element to a predetermined collection

CSS <button class='btn' data-next="games" data-prev="games1" data-storage="128" data-graphcard="2" data-processor="i3">Click Here</button> JavaScript. let components = ["storage", "graphcard", "processor"]; const allBtnsToStore = d ...

javascript

Efficiently organizing reducers into separate files in ReactJS and merging them together

My App is a simple counter app where buttons are images with their own counters. https://i.stack.imgur.com/qkjoi.png In my App.js file, I imported the reducer for the counters using the following code: import reducer from './reducers/reducerCounter&a ...

javascriptreactjsreduxreact-redux

What is the method to disable response validation for image endpoints in Swagger API?

I'm working with a Swagger YAML function that looks like this: /acitem/image: x-swagger-router-controller: image_send get: description: Returns 'image' to the caller operationId: imageSend parameters: ...

javascriptnode.jsswaggerswagger-uiswagger-editor

There appears to be an issue with Javascript's ability to handle JSON API requests

I'm currently working on a webpage that utilizes the openweathermap API to showcase the user's city and local temperature. Unfortunately, I'm encountering an issue where the JSON API is not being processed and nothing is happening. Despite r ...

javascriptjqueryjsonopenweathermap

What kind of data does this collection hold, and what is the best method to retrieve its stored values?

I recently received a code to program a logic for and I have successfully figured out my algorithm. However, I am facing difficulty determining the datatype of a particular declaration. My task involves comparing the values of "skills" in each row to &apos ...

javascriptarraysjavascript-objects

I'm having trouble getting the "spacing" styling attribute to work in Material UI when I attempt to space out elements within my Box component. Can anyone explain why this might be happening?

Within my React 16.10 application, I am utilizing materialUI components. Specifically, I have incorporated two buttons inside a Box element. <Box style={{ marginTop: "3rem", marginLeft: "1rem", display: "f ...

cssreactjsmaterial-uispacingbox

Error: Unable to locate the tslint command

After attempting to utilize tslint --fix, I encountered the error message bash: tslint: command not found.... To install tslint, I ran the following command: yarn global add tslint typescript. The operating system on my machine is Centos 7. ...

javascripttypescripttslint

Customize the CloseIconButton in Material-UI Autocomplete for a unique touch

Hello everyone, I have a simple dilemma. I am trying to implement a custom closeIconButton, but the only available prop is closeIcon. However, this prop is not sufficient because I need this custom button to also have an onClick property. If I add the onC ...

javascriptreactjsmaterial-ui

Is it necessary to bump the major version if I make updates to a react module that does not affect existing code functionality, but may cause Jest snapshot tests to break?

Imagine I am developing a module for a react component and currently working on a PR to introduce a new feature. Along with this new feature, I have also made changes to the component by refactoring it to eliminate certain internal parts that were previou ...

javascriptreactjsnpmjestjssemantic-versioning

Learn to Generate a Mathematical Quiz with Javascript

For a school project, I am tasked with developing a Math Quiz which showcases questions one at a time. The questions vary in type, including Multiple Choice, Narrative Response, Image Selection, Fill in the blank, and more. I require assistance in creatin ...

javascriptjqueryhtmlcssbootstrap-4

My AngularJs code seems to be throwing some errors

I recently started learning Angularjs and here is the code I have written: <!DOCTYPE html> <html> <head> <title>ng-Messages Service</title> <script src='https://ajax.googleapis.com/ajax/libs/jquery ...

htmlangularjsmodel-view-controller

Is there a way to trigger the vue-cli build command automatically when specific files are modified?

One way I can build my JavaScript file is by using the following command: vue build main.js --dist dist --prod --lib While this works, I am looking for a way to automate this process whenever I make changes to my JS or Vue files. I prefer not to rely on ...

javascriptnode.jsnpmvue.jsvue-component

Switch the design and save it in the browser's cache

Exploring the possibility of having two themes, "dark" and "light," that toggle when a checkbox is clicked. To implement the theme change, I used the following JavaScript code: document.documentElement.setAttribute('data-theme', 'dark&apos ...

javascriptcsslocal-storage

Exporting functions using reactjs and babel

I'm currently working on a project that involves using reactjs, transpiled by babel with es2015 and react transforms configured in my .babelrc file. In the initial stages of refactoring, I realized that many of the classes should actually be functions ...

javascriptreactjsecmascript-6babeljs

Is it possible to access the names of objects within an array in JavaScript?

If objects are created and placed in an array, does the array store only the properties of the objects or also their names? This may seem like a simple question, but I've been unable to find a clear answer. var boxA = {color: "red", width: 100}; var ...

javascriptarraysjavascript-objects