What is the best way to eliminate the selected text while moving/grabbing an element?

I'm facing an issue with removing the background text image when dragging elements. I have tried troubleshooting but haven't found a solution yet.

For reference, I looked at this link: HTML5 Drag and Drop anywhere on the screen

function drag_start(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("text/plain", (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 
function drop(event) { 
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('divTile');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    event.preventDefault();
    return false;
} 
var dm = document.getElementById('divTile'); 
dm.addEventListener('dragstart',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',drop,false); 

https://i.sstatic.net/IPxGM.jpg

Appreciate your help! Thank you.

Answer №1

Utilizing pseudo before | after classes allows for achieving this as shown in the example below

function initiate_drag(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("text/plain",
    (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
    
} 
function oversee_drag(event) { 
    event.preventDefault(); 
    return false; 
} 
function end_drop(event) { 
  event.preventDefault();
  var offset = event.dataTransfer.getData("text/plain").split(',');
  var dm = document.getElementById('divTile');
  dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
  dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
  return false;
} 
var dm = document.getElementById('divTile'); 
dm.addEventListener('dragstart',initiate_drag,false); 
document.body.addEventListener('dragover',oversee_drag,false); 
document.body.addEventListener('drop',end_drop,false); 
#divTile { 
    position:  absolute;
    left: 0;
    top: 0; /* setting these values prevents Chrome from returning 'auto' from getComputedStyle */
    background-color: red;
    min-width: 50px;
    min-height: 1em;
    background: red; 
    border: 2px  solid rgba(0,0,0,0.5); 
    border-radius: 50%; padding: 8px;
    z-index:2
}
#divTile::after{
  position: absolute;
  top: 0; left: 0; 
  width: calc(100% + 4px); height:calc(100% + 4px);
  content: '';
  z-index:-1
}
<aside draggable="true" id="divTile">
    This 
</aside>
<p>I never am really satisfied that I understand anything; because, understand it well as I may, my comprehension can only be an infinitesimal fraction of all I want to understand about the many connections and relations which occur to me, how the matter in question was first thought of or arrived at, etc., etc.</p>
<p>In almost every computation a great variety of arrangements for the succession of the processes is possible, and various considerations must influence the selections amongst them for the purposes of a calculating engine. One essential object is to choose that arrangement which shall tend to reduce to a minimum the time necessary for completing the calculation.</p>
<p>Many persons who are not conversant with mathematical studies imagine that because the business of [Babbage’s Analytical Engine] is to give its results in numerical notation, the nature of its processes must consequently be arithmetical and numerical, rather than algebraical and analytical. This is an error. The engine can arrange and combine its numerical quantities exactly as if they were letters or any other general symbols; and in fact it might bring out its results in algebraical notation, were provisions made accordingly.</p>
<p>The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform. It can follow analysis, but it has no power of anticipating any analytical revelations or truths. Its province is to assist us in making available what we are already acquainted with.<

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 way to display two tables together using inline styling?

I attempted to display 2 tables inline by setting their display property to inline, but unfortunately, it did not work as expected. Is there a more straightforward way to achieve the desired inline display for these tables? table { display: inline; } ...

What is the best way to delete an item (using its specific identifier) from an array within a mongoose/mongoDB model?

In my app, I have a User schema with a favorites key that stores an array of objects, each with a unique id. I am attempting to delete one of these objects based on its id. Here is the code snippet that I believe should accomplish this: User.updateOne({id ...

Synchronous execution of functions in Node.js

I need to ensure that func2 is only called after func1 has completed its execution. { func1(); func2();// } However, the issue arises when func1() starts running and func2() does not wait for it to finish. This leads to a runtime error as func2() require ...

Using jQuery to add and remove CSS classes on IE9 with Selenium

Hello, sorry for the generic question. We are currently automating our UI testing using Selenium Web Driver (v2.24.1) and everything is going smoothly except for IE9. One of the functionalities we are testing involves showing and hiding UI controls using ...

Problem with Selenium WebDriver: Some HTML elements are not being displayed

I am currently working on a python web scraper. Here is the code I have written: from selenium.webdriver.chrome.options import Options from selenium import webdriver from bs4 import BeautifulSoup chrome_options = Options() chrome_options.add_argument(&qu ...

Tips for preventing the parent element's height from fluctuating when displaying a child div using v-if

I have a main container and an inner container. The inner container is displayed using v-if. I want to include a transition effect on the inner element, but after the transition ends, the height of the parent container changes abruptly and looks unattracti ...

Picture transports during change

Is there a way to increase the size of images in a List without causing other images to move when hovered? Currently, when an image is hovered, it increases in size but causes the surrounding images to shift to a new line and I would like to avoid this beh ...

Retrieve the title of the item by selecting it within the h1 tag using Beautiful Soup

import requests from bs4 import BeautifulSoup def fetch_webpage(url): response = requests.get(url) if not response.ok: print('Server Responded: ', response.status_code) else: soup = BeautifulSoup(response.text, 'lxml') ...

Error: When attempting to overwrite res.render, a TypeError occurs because the property 'app' is being read from an undefined source

I am working on a project where I need to modify the behavior of the res.render method in order to consistently include an additional option, regardless of any other options present. However, when attempting to implement this modification, I encounter th ...

Incorporate a JavaScript library into a personalized JavaScript file that is utilized within my Angular2 project

Integrating Machine Learning into my Angular2 project using the "synaptic.js" JavaScript library is my goal. After executing the command npm install synaptic --save I intend to execute a custom javascript file (myJsFile.js): function myFunction() { v ...

Text encoded in UTF-8 emerges from the surrounding frame

As someone who is relatively new to frontend development, I recently created a blog using a template that utilizes Next.js, Tailwind, and React. However, when I input UTF-8 text in Korean, the text overflows outside of the parent frame on mobile devices. ...

Assistance required with Jquery logic for managing different divs with individual triggers. Ensure only one div is open at a time and close all others when a new one is opened

http://jsfiddle.net/nicktheandroid/ZSvHK/ I am facing some challenges with my current code and would appreciate any suggestions for improvement. Here are the issues I am encountering: I have a set of divs, each with its own trigger button. Only one menu ...

Are there any universal methods for enlarging the size of a checkbox without altering the HTML structure?

Is it possible to adjust the size of a <input type="checkbox"> in a way that works across all browsers without changing the HTML markup? I attempted to modify the height and width using CSS, but encountered issues such as pixelation in Firefox and o ...

Adjusting image sizes in WordPress using CSS and HTML

I am currently working on a blog using the Marlene theme on Wordpress. For my posts, the default image resolution is 835x577, which suits my needs perfectly (see example post). However, I also have a "News" page where I want to display a list of all news ...

Tips on downloading content from a webpage using Selenium WebDriver after ensuring the page is fully loaded

Background: I have a Python Selenium script that waits for a website to finish loading before attempting to click or download a specific link from the href attribute. Selenium Script in Python: browser = webdriver.Chrome('C:/full/path/to/chromedr ...

A guide on accessing information from a post form using an express.js server

Issue: Whenever the client submits a form using a post request to the server, the express server receives an empty body (req.body = {}). Objective: My goal is to retrieve req.body.username and req.body.password on a post request from the client (using the ...

How can I dynamically apply an active class when clicking on a group of buttons?

Iterating through the buttons array, I retrieve three buttons. My goal is to determine which button has been clicked and apply an active class to it. import React from "react"; import { useState } from "react"; import style from "./years.module.scss"; co ...

React is unable to properly utilize Mui icons in a basic Card example

C:\Users\Yeap\Documents\react sitio web\my-app\node_modules\react-scripts\scripts\start.js:19 throw err; ^ [Error: ENOENT: no such file or directory, stat 'C:\Users\All Users'] { errno ...

Approach needed to assign identical CSS property to various classes that are dynamically created via ngFor in Angular?

I am currently working on writing CSS for dynamically generated classes. I have set up the classes using ngFor as shown below: <div style="max-height: 450px;" *ngFor="let item of data; let i = index" class="card{{i + 1}}"> ..... </div> Now, I ...

Is it possible for me to enhance Object, Function, Date, and other similar entities in Node by adding "static methods"?

When creating a Node.js module called "augs" that includes: Object.foo = "bar"; And then entering the following commands in the REPL: require("./augs"); typeof Object.foo The result returned is 'undefined'. In our web application, we have a ...