What is the process for creating a draggable div with editable content?

I've been attempting repeatedly, but I just can't seem to make the text both editable and draggable. Whenever I apply .draggable(), the contenteditable="true" gets turned off.

Javascript

$(".note").keyup(function() {
    $(this).css('height' , '100%');
});

HTML

<div class="note" contenteditable="true">
    <span id='close' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
        <img src="images/close.png" height="30" width="30" align="right" style="vertical-align: top; float: right"/>
    </span>
</div>

CSS

.note {
    width: 280px;
    height: 130px;
    padding-top: 20px;
    margin-top: 60px;
    margin-left: 25px;
    padding: 2;
    word-break: break-word;
    font-family: Note;
    font-size: 20px;
    background-image: url("images/stickynote.png");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}
javascripthtmlcss

Answer №1

If you want to enable double-click editing and single-click dragging for an element, you can use the following code:

$(".note").draggable()
  .click(function() {
    $(this).draggable( {disabled: false});
}).dblclick(function() {
    $(this).draggable({ disabled: true });
});

To ensure that your close button <img> stays in the top right of its container, add this CSS code:

position: relative;
top: -20px;

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

Unable to connect to a style sheet

I'm in the process of developing a web application and I'm facing an issue with linking a stylesheet to my app. Check out my code below: <html> <head> <title>Bubble</title> </head> <link rel=" ...

css

How to properly format an HTML input box for numeric entry and ensure correct formatting of the minus sign

I need assistance with formatting an HTML text input box to only accept numeric values using JavaScript. Specifically, the input should allow digits, a minus sign, or a dot/comma (which will be converted to a dot). However, I want to prevent multiple conse ...

javascripthtmlinputuser-input

The variable 'X' in Node.js is not been declared

I've been struggling with this problem, trying to fetch my most recent tweets as an array using the npm module https://github.com/noffle/latest-tweets. However, no matter how I approach it, I always encounter errors such as 'posts is not defined& ...

javascriptnode.jsexpresstwitter

The jQuery autocomplete's source is set as the hidden input variable's value

Having issues with jQuery's autocomplete and referencing a hidden input value on the page. Here is the hidden input field: <input type="hidden" id="array_activities" value="[{ label: 'Football', value: '1' }, { label: 'Te ...

javascriptjqueryjquery-autocompletejquery-ui-autocomplete

Using Puppeteer to extract data produced by JavaScript

Struggling to extract a dynamically generated value using JavaScript? I've been attempting this for some time with no success. The login aspect of the page is working fine. The main focus now is on retrieving the SoC% value from the page and nothing ...

javascriptnode.jsweb-scrapingpuppeteer

Tips for updating content on hover

I have been experimenting with this idea and initially thought it would be a simple task. My goal is to hover over the 'NEW' label and change its content to 'ADD' using only CSS. body{ font-family: Arial, Helvetica, sans-serif; } ...

htmlcss

Implement a jQuery DataTable using JSON data retrieved from a Python script

I am attempting to create an HTML table from JSON data that I have generated after retrieving information from a server. The data appears to be correctly formatted, but I am encountering an error with DataTable that says 'CIK' is an unknown para ...

javascriptjquerypythonjson

Send click events between two canvases

Utilizing a Threejs canvas to showcase a 3D model alongside a hidden Fabricjs canvas for texture application. I successfully converted the 3D coordinates from the Threejs canvas to the 2D canvas. Now, my goal is to transfer the click and drag events from ...

javascriptjquerycanvasthree.jsfabricjs

What is the best way to retrieve the id of the chosen option within a <select> element?

In my index.html file, I have a < select > field and a button: <select id="mylist"></select> <input type="button" id="btn" value="update"> The provided Javascript code is designed to update the options of the < select > fie ...

javascriptjqueryjquery-uijquery-selectorsdom-events

Designing forms in Bootstrap Studio to display responses across multiple columns

My issue involves using bootstrap studio to send form responses to my inbox, specifically with the layout across columns. For example: <div class="container"> <div class="row"> <div class="col-md-6"> ...

htmlbootstrap-4bootstrap-studio

Ways to prevent the navbar from disappearing when the Chrome browser is resized

I am looking to align the navbar lists, which are currently on the right side, below the header icon placed on the left side. Rather than toggling the navbar with a button, I want it to simply expand under the header icon. It seems that the disappearance ...

htmlcssbootstrap-4

Creating interactive ng-models for form controls using AngularJS

I am working on a project where I have an Array in my controller. This Array is being used to dynamically generate input fields on the page. Here is a snippet of my AngularJs code: var app = angular.module('plunker', []); app.controller(' ...

javascriptangularjs

Using setTimeout with drag and drop functionality in HTML

I need a setTimeout function to be triggered only after dragging and dropping an image into a division, not before the drop occurs. ...

javascriptphphtmlweb

Steps for adjusting the port number in a Vue.js CLI project

Is it possible to modify the Port number within a Vue-CLI project in order for it to operate on a different port other than 8080? ...

javascriptnode.jsvue.jsvuejs2vue-cli

The Boostrap-5 carousel seems to be malfunctioning and not functioning correctly

I've been teaching myself how to construct websites using tutorials and other resources. I'm currently diving into the world of Bootstrap, but I'm having trouble with the carousel feature. No matter how much I try, the slides get stuck on th ...

htmlxcodeperformancecarouselbootstrap-5

Updating Django view using an AJAX POST request triggered by jQuery

I am facing an issue regarding updating a Django view based on a context that is updated through an AJAX post request triggered by jQuery. The need for this AJAX request arises from the necessity to make changes in the page UI without refreshing the entire ...

htmljquerydjangoajax

Screen proportions altered - Background image disappearing | Unusual occurrences |

If you look at my site everything seems to be ok, ... untill you minimize the website. A horizontal scrollbar appears and when you use that scrollbar, you will see that my image has vanished. My Website I made that image responsive...so i have no idea wh ...

htmlcss

Access-Control-Allow-Origin does not accept null as the origin with XMLHttpRequest

Similar Question: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin XMLHttpRequest cannot load file://… Origin null is not allowed by Access-Control-Allow-Origin My goal is to access my JSON file using the following ...

javascriptjqueryjsongoogle-chrome

The importance of maintaining aspect ratio for HTML5 videos within parent containers

I have a bootstrap card with a video and text below. The HTML for the video card is as follows: <div class="card video-card"> <div class="card-body"> <video width="100%"> <source src="/request/video/Sample ...

htmlhtml5-videobootstrap-4

Is there a substitute for the Javascript onchange event listener in CakePHP 3?

Having trouble with the javascript onchange event listener in cakephp3.7. I've got an e-commerce web app running smoothly on cakephp3.7. Now, I want to improve the sales submission form by dynamically loading extra fields based on the product category ...

javascriptajaxcakephponchangecakephp-3.7