Develop Reference

Javascript (vanilla) drag and drop does not work the second time an element is dragged and dropped

I am trying to implement a drag and drop functionality using vanilla Javascript on my web app, where element gets moved to a new position within a div, once it's dragged and dropped.
But I am having an issue where I can drop the element fine the first time, but I can no longer do it the second time onwards.
After debugging, I have noticed that the first time I drop an element, it does not have any inline style (see Appendix A). But when I try and do it the second time, it now has an inline style (see Appendix B) and for some reason, I cannot chnage the values of it. That was also the case after I manually added inline style to my draggable element- I could not drop the item even the first time when I did it.
I am completely out of ideas as to what I could be doing wrong and no similar questions yielded a solution.
Thank you very much in advance for your time.
Code (Unnecessary parts ommitted)
const list = document.querySelector("#list");
const rect = list.getBoundingClientRect();
let oldLeft, oldTop, mouseXStart, mouseYStart;
function dragStart(event) {
event.dataTransfer.setData("plain/text", event.target.id);
const item = document.querySelector("#" + event.target.id);
mouseXStart = event.clientX - rect.left;
mouseYStart = event.clientY - rect.top;
oldLeft = item.style.left;
oldTop = item.style.top;
console.log(item);
}
function dragOver(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
}
function dropItem(event) {
event.preventDefault();
const mouseXEnd = event.clientX - rect.left;
const mouseYEnd = event.clientY - rect.top;
//Calculate by how much mouse has been moved
const newLeft = mouseXEnd - mouseXStart;
const newTop = mouseYEnd - mouseYStart;
const item = document.querySelector('#' + event.dataTransfer.getData("plain/text"));
item.style.left = oldLeft + newLeft + "px";
item.style.top = oldTop + newTop + "px";
}
#list {
position: relative;
top: 60px;
height: 600px;
width: 100%;
border: 2px solid rgb(107, 14, 14);
display: block;
}
#list>div {
position: absolute;
height: 200px;
width: 200px;
background-color: blue;
margin: 10px;
overflow: hidden;
text-align: left;
}
<div id="list" ondrop="dropItem(event)" ondragover="dragOver(event)">
<div id="test" draggable="true" ondragstart="dragStart(event)">
<button type="button"></button>
<div>
<p>Test</p>
</div>
</div>
</div>
Appendix A
console.log() output on the first dragStart() call:
<div id="test" draggable="true" ondragstart="dragStart(event)">
Appendix B
console.log() output on the second dragStart() call:
<div id="test" draggable="true" ondragstart="dragStart(event)" style="left: 853px; top: 147px;">

Problem
This code
oldLeft + newLeft + "px"
evaluated to something like
123px40px
because
oldLeft = item.style.left
returned string with px at the end
Solution
Parse the value to float
oldLeft = item.style.left ? parseFloat(item.style.left) : 0;
oldTop = item.style.top ? parseFloat(item.style.top) : 0;
const list = document.querySelector("#list");
const rect = list.getBoundingClientRect();
let oldLeft, oldTop, mouseXStart, mouseYStart;
function dragStart(event) {
event.dataTransfer.setData("plain/text", event.target.id);
const item = document.querySelector("#" + event.target.id);
mouseXStart = event.clientX - rect.left;
mouseYStart = event.clientY - rect.top;
oldLeft = item.style.left ? parseFloat(item.style.left) : 0;
oldTop = item.style.top ? parseFloat(item.style.top) : 0;
}
function dragOver(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
}
function dropItem(event) {
event.preventDefault();
const mouseXEnd = event.clientX - rect.left;
const mouseYEnd = event.clientY - rect.top;
//Calculate by how much mouse has been moved
const newLeft = mouseXEnd - mouseXStart;
const newTop = mouseYEnd - mouseYStart;
const item = document.querySelector('#' + event.dataTransfer.getData("plain/text"));
item.style.left = oldLeft + newLeft + "px";
item.style.top = oldTop + newTop + "px";
}
#list {
position: relative;
top: 60px;
height: 600px;
width: 100%;
border: 2px solid rgb(107, 14, 14);
display: block;
}
#list>div {
position: absolute;
height: 200px;
width: 200px;
background-color: blue;
margin: 10px;
overflow: hidden;
text-align: left;
}
<div id="list" ondrop="dropItem(event)" ondragover="dragOver(event)">
<div id="test" draggable="true" ondragstart="dragStart(event)">
<button type="button"></button>
<div>
<p>Test</p>
</div>
</div>
</div>

Multiple buttons with hover effect Javascript

I want to create animations on buttons in Javascript. When I hover any buttons animations must follow cursor for now I create working sample with one buttons here: https://jsfiddle.net/sL0uebh4/
const btn = document.querySelector('.btn');
btn.onmousemove = function(e) {
const x = e.pageX - btn.offsetLeft;
const y = e.pageY - btn.offsetTop;
btn.style.setProperty('--x', x + 'px')
btn.style.setProperty('--y', y + 'px')
}
.btn {
display: block;
width: 150px;
height: 50px;
background: #666;
margin: 10px;
}
.btn::before {
content: '';
position: absolute;
top: var(--y);
left: var(--x);
width: 0;
height: 0;
background: #ff0000;
}
.btn:hover::before {
width: 30px;
height: 30px;
}
<a href#="" class="btn">Click</a>
<a href#="" class="btn">Click2</a>
<a href#="" class="btn">Click3</a>
I know I need change querySelector() to querySelectorAll and in my code use somehow forEach() but all my attempts failed and I need a little hint how it should looks.

<a href#="" onmousemove="animation(this.id)" id="btn1" class="btn">
Click
</a>
<a href#="" onmousemove="animation(this.id)" id="btn2"class="btn">
Click2
</a>
<a href#="" onmousemove="animation(this.id)" id="btn3" class="btn">
Click3
</a>
JavaScript:
function animation(id){
const btn = document.getElementById(id)
console.log(btn)
btn.onmousemove = function(e) {
const x = e.pageX;
const y = e.pageY;
btn.style.setProperty('--x', x + 'px')
btn.style.setProperty('--y', y + 'px')
}
}

How to put symbol or text into an image's clicked position

I am trying to implement something like this, a predefined symbol or text should be putted on a image where clicked. Suppose there is an image and I had clicked on the top right corner of that image. Now I want to show something on that clicked position.
I can get the coordinate of the clicked position. But I am not getting how I can put something on that place using this coordinate.
This is what I had tried.
HTML code :
<img src="result.png" alt="" id="image">
JS code:
$('#image').click(function (e) {
var posX = $(this).position().left,
posY = $(this).position().top,
positionX = e.pageX - posX,
positionY = e.pageY - posY;
$("#image").html('<p id="clicked">Clicked here</p>');
});

You are trying to set the html of an image element that is clicked. You do nothing with the x and y position of the element.
You need to append an element and set the position.
$('#myDiv').on("click", "img", function (e) {
var wrapper = $(this).parent(),
position = wrapper.offset(),
posX = position.left,
posY = position.top,
positionX = Math.floor(e.pageX - posX),
positionY = Math.floor(e.pageY - posY),
marker = $('<p class="clicked">Clicked here</p>');
marker.css({top: positionY + "px", left: positionX + "px"})
wrapper.append(marker);
});
#myDiv {
position: relative;
border: 1px solid green;
}
#myDiv p {
position: absolute;
color: rgb(0, 255, 255);
mix-blend-mode: difference;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Example</h1>
<div id="myDiv">
<img src="http://placekitten.com/g/400/300" alt="">
</div>

Consider an alternative solution.
$(function() {
$.fn.setMarker = function(e, o) {
if (o == undefined) {
o = $("<p>", {
class: "clicked"
}).html("Clicked Here");
}
var self = $(this);
var marker = o.appendTo(self.parent()).css({
top: (e.pageY - self.offset().top) + "px",
left: (e.pageX - self.offset().left) + "px"
});
}
$('#myDiv-1').on("click", "img", function(e) {
$(this).setMarker(e);
});
});
#myDiv-1 {
position: relative;
border: 1px solid green;
}
#myDiv-1 p {
position: absolute;
color: rgb(0, 255, 255);
mix-blend-mode: difference;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Example</h1>
<div id="myDiv-1">
<img src="http://placekitten.com/g/400/300" alt="">
</div>
This adds the function as a jQuery extension basically. If you like, you can modify the function to pass in an jQuery Object or Element to add as the marker.

Add span to page at the cursor position

I have the following JavaScript, I am trying to insert the span at where ever the cursor position is in the div.
var appendPlaceHolder = function (field) {
var e = document.getElementById("t");
e.innerHTML += (' <span class="nonEditable tags">{' + field + '} <span onclick=removePlaceholder(this) class="testing"></span>x</span> ');
}
<div id="t" contenteditable="true">
Hello
</div>
How do I go about doing it?

Here is an old script I've written.Hope it helps.
continent is the mouse entered div, tooltipOutput
function continentTooltip(continent, tooltipOutput) {
var tooltip = $('.map__tooltip');
$(continent).mouseenter(function() {
$(document).off('mousemove').bind('mousemove', function(e){
var positionX = (e.pageX + 20) + 'px';
var positionY = e.pageY + 'px';
$('.map__tooltip').css(
"transform" , 'translate(' + positionX + ', ' + positionY + ')'
);
});
tooltip.addClass('map__tooltip--show');
tooltip.text(tooltipOutput)
})
$(continent).mouseleave(function() {
tooltip.removeClass('map__tooltip--show');
});
}
//call script
continentTooltip(africa, 'Vacations in Africa');
HTML:
<div class="map__tooltip"></div>
CSS:
.map__tooltip {
display: none;
background-color: #FFF;
border-radius: $radius;
padding: 4px;
position: absolute;
top: 0;
left: 0;
}
.map__tooltip--show {
display: block;
}
#media screen and (max-width: 1300px) {
.map__tooltip--show {
display: none;
}
}

Error mousemove event can't show button in other frame?

I have a sample code:
<div id="background-1" style="background: url('image1.png') no-repeat left center; width: 200px; height: 200px; float: left;">
<div id="button-wrapper" style="position: absolute; opacity: 1; z-index: 100;">
<input type="button" value="submit">
</div>
</div>
<div id="background-2" style="background: url('image2.png') no-repeat right center; width: 200px; height: 200px; float: right;">
<div id="button-wrapper" style="position: absolute; opacity: 1; z-index: 100;">
</div>
</div>​
And my script:
jQuery(document).ready(function(){
jQuery("div[id^=\'button-wrapper\']").parent().mousemove(function(e){
var _top = e.pageY - 5;
var _left = e.pageX - 5;
var _c = jQuery(this);
var _p = _c.position();;
if (_top > (_p.top + _c.height())) _top = _p.top + _c.height();
if (_left > (_p.left + _c.width())) _left = _p.left +_c.width();
jQuery("div[id^=\'button-wrapper\']").css({
top: _top,
left: _left
});
});
});​
Error when I hover background-2 is event mousemove not run button submit, how to fix it? demo here

You can see demo here , hope help you !!!
var yellow = $('div[id^=\'yellow\']');
var offset = yellow.offset();
var offsetWidth = offset.left + yellow.width();
var offsetHeight = offset.top + yellow.height();
var red = $('#red');
yellow.on('mousemove', function (e) {
red.css("left", e.pageX);
red.css("top", e.pageY);
});
red.on('mousemove', function (e) {
if(e.pageX >= offset.left && e.pageY >= offset.top &&
e.pageX <= offsetWidth && e.pageY <= offsetHeight) {
red.css("left", e.pageX);
red.css("top", e.pageY);
}
});