Is it possible to drag the parent element but only select the text within the child

How can I make the parent div draggable, yet keep the text in the child span selectable?

<aside draggable="true" id="dragme">
    This is an aside, drag me. <span id="copyme" draggable="false">But copy me!</span>
</aside>

A similar question has been asked here, but I'm looking for a solution using only HTML5, without jQuery.

I've attempted to prevent the drag event, but so far I haven't been successful without affecting text selection:

function dontdrag(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    ev.stopImmadiatePropagation();
    return false;
}

Here is a fiddle demonstrating the issue: http://jsfiddle.net/lborgman/8NvAT/6/

Is there a solution to this problem?

UPDATE: There might be a potential solution in the updated fiddle: http://jsfiddle.net/lborgman/8NvAT/7/

It's not perfect, but it seems to work. Any suggestions on improving this solution further?

javascriptcsshtmldraggable

Answer №1

When faced with a similar issue, I tackled it using specific drag-handle areas. Instead of simply adding the draggable="true" attribute to a random parent element, I opted to include a precise, absolutely-positioned drag handle square in one corner of the parent. While this approach may not be ideal for cases where you want to conceal the draggable feature (or improve its aesthetics), it definitely simplifies the drag events process.

Answer №2

To implement event listeners for the "copyme" element, follow this code structure:

cm.addEventListener("mouseover", function() {
    dm.setAttribute("draggable", "false");
});
cm.addEventListener("mouseout", function() {
    var selection = window.getSelection();
    if (selection) {
        var range = selection.getRangeAt(0);
        var ancestor = range.commonAncestorContainer;
        if (ancestor.parentNode === cm) {
            selection.removeAllRanges();
        }
    }
    dm.setAttribute("draggable", "true");
});

To view the complete solution, visit this fiddle: http://jsfiddle.net/lborgman/8NvAT/12/

Currently, this approach seems to be the most effective.

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

Why does appending to a TextArea field fail in one scenario but succeed in another when using Javascript?

There is a JavaScript function that captures the value from a select dropdown and appends it to the end of a textarea field (mask) whenever a new selection is made. function addToEditMask(select, mask) { var selectedValue = document.getElementById(sel ...

javascripthtmlbootstrap-4

Exploring the capabilities of React testing-library for interacting with the DOM within a React application

I've been working on developing custom developer tools after finding inspiration from Kent C Dodds' insightful article here. One of the challenges I encountered was automatically populating values in a form that I created. My approach involved u ...

javascriptreactjsmaterial-uireact-testing-librarytesting-library

"Implementing a seamless transition effect on two slideshows using jQuery's fadeslideshow

I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...

javascriptjqueryhtmlcss

Harnessing the power of the bluebird promise library

Within myPeople function, there is a promise function being called as shown below: var myPeople = function(){ var go; return new Promise (function(resolve){ User .getPeople() .then(function(allPeople){ ...

javascriptnode.jspromisebluebird

Retrieve database SQL information using JavaScript to display data

I'm struggling to push the value from a textbox to SQL and display it. Despite reading numerous topics, I still can't figure it out. My explanation skills are lacking, but hopefully you can understand what I'm trying to achieve, especially i ...

javascriptphpajaxmysqli

`Enhancing Navigation Links with Scroll-Activated Styling`

I'm attempting to recreate a visual effect that is similar to: Specifically, I am trying to achieve a style where the links in the navigation bar change color when the corresponding section is displayed, such as having the gallery link in the navbar ...

javascriptjquerycss

What is the method to retrieve the base host in AngularJS?

I need assistance with the following URL: https://192.168.0.10/users/#!/user-profile/20 When I use $location.host, it returns 192.168.0.10 However, I only want to extract https://192.168.0.10 What is the best way to achieve this? ...

javascriptangularjslocation

Is it possible to duplicate native functions in JavaScript, such as window.alert or document.write?

I am looking to replace all instances of the alert function in my code with a custom alert message saying "you used alert". var hardCodedAlert = alert; //Although I understand this won't work. What other approach can I take? window.alert=function(){ ...

javascriptfunctionclonenative-methods

Tips for transforming JSO into JSON data format

Here is an example: var info = [{"name":"john","age":"30"},{"name":"smith","age":"28"}] I am looking to convert the above json object to a format like this result: [{name:"john",age:30},{name:"smith",age:28}] Any suggestions on how to achieve this? ...

javascriptjson

Switch between two PHP files with a toggle feature using jQuery click event

Need help with toggling between two PHP files - cab.php and d3.php. Toggling within the same file works fine, but encountering issues when trying to toggle from one file to another. function botaod2mostraesconde() { $(".wrapd2").toggle(); $( ...

javascriptphpjqueryhtml

What's the best way to include php variables in this Javascript code?

I'm currently in the process of constructing a straightforward news page that utilizes ajax filters based on the user's selected category. The javascript code below establishes a connection with a php file and generates HTML using data from a mys ...

javascriptphpjquerymysqlajax

Using React Native to integrate a JSON string into a button

I'm currently working on an app to explore the functionality of websockets in react native. I have successfully retrieved data from the websocket in JSON format and can output it to the console using console.log. However, my goal is to display a speci ...

javascriptjsonreact-nativewebsocket

Catching the Selenium NoSuchElementError in JavaScript is impossible

Update: It's puzzling why this was marked as answered since the linked questions don't address the issue at hand and do not involve Javascript. My objective is to detect this error, rather than prevent it, given that methods like invisibilityOfEl ...

javascriptseleniummocha.js

Nuxt-Gmap displaying multiple infowindows

Does anyone know how to close an info window if a user clicks on another marker? In the Google documentation, you open infowindows manually, but in nuxt-gmap it's like this: <GMap :key="mapRender" ref= ...

javascriptvue.jsgoogle-mapsnuxt.js

Implementing Promises in AngularJS Controller: A Comprehensive Guide

I'm currently working on implementing a basic function using promises in one of my controllers to make sure it works correctly before adding more complex functionality. I keep running into a "TypeError: undefined is not a function" error when trying t ...

javascriptangularjspromiseangular-promise

JavaScript and the importance of using commas in arrays

I am developing a system that displays text in a textarea when a checkbox is checked and removes the text when the checkbox is unchecked. The functionality is mostly working as intended, but I am facing an issue where commas remain in the textarea after un ...

javascripthtml

Transform a legitimate web address into an acceptable file path

I find myself in a situation that has me scratching my head. Imagine I want to convert any valid URL into a valid pathname for use on an image proxy with a URL structure like this: http://image-proxy/hash_of_url/encoded_url Is there an efficient way to a ...

javascriptnode.jsurl-encoding

Required file missing in React application unable to locate

I have a project organized in the following way: - my-app - src - some files - public - index.html - ... When I run npm start, the application functions as expected. Now, I am looking to rename src to application! After renami ...

htmlreactjstypescriptnpm

Unresponsive CSS styles on a specific DIV element

Here is the HTML code I am currently working with: <body> <section id="info"> <div class="status"> ... I have been attempting to apply styles to the div with a class of 'status' using my CSS file linke ...

htmlcss

Is there a way to display incoming chat messages on the chat box without requiring a page refresh using socket.io?

Having trouble resolving an issue with my application hosted on wpengine, built using WordPress, vue.js, and socket.io for chat functionality. The main concern is that new messages posted in the chatbox do not display until the page is refreshed. I'm ...

javascriptphpwordpressvue.jssocket.io