Develop Reference

How can I make an image invisible when I drag and drop an element on it?

I am trying to replace an image with another image when something is dragged and dropped on it. This is my current code.
What should I add in the document.addEventListener("drop", function(event) to make the image invisible, and replace it with another image when the dragtarget is dropped on it?
/* Events fired on the drag target */
document.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("demo").innerHTML = "Started to drag the p element.";
event.target.style.opacity = "0.4";
});
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
document.addEventListener("dragenter", function(event) {
if (event.target.className == "droptarget") {
event.target.style.border = "5px dotted red";
}
});
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
document.addEventListener("dragleave", function(event) {
if (event.target.className == "droptarget") {
event.target.style.border = "";
}
});
document.addEventListener("drop", function(event) {
event.preventDefault();
if (event.target.className == "droptarget") {
document.getElementById("demo").style.color = "";
document.getElementByClass("droptarget").style.visibility = 'hidden';
}
});
.dragtarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
.droptarget {
float: left;
width: auto;
height: auto;
margin: 15px;
padding: 10px;
}
<p>Drag and drop the p element on the image:</p>
<div class="dragtarget">
<p draggable="true" id="dragtarget">Drag me!</p>
</div>
<div class="droptarget"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/49ec1464-d899-400a-b608-c48c76b500d2/ddlby97-f31bd202-49ef-4391-995a-e08a03e9a0f8.jpg/v1/fit/w_150,h_150,q_70,strp/baby_yoda_by_patrickbrown_ddlby97-150.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTAwIiwicGF0aCI6IlwvZlwvNDllYzE0NjQtZDg5OS00MDBhLWI2MDgtYzQ4Yzc2YjUwMGQyXC9kZGxieTk3LWYzMWJkMjAyLTQ5ZWYtNDM5MS05OTVhLWUwOGEwM2U5YTBmOC5qcGciLCJ3aWR0aCI6Ijw9OTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.F2FTXKUhT4EtaU-LcDHGU-e6TKzIADYXo3UIRgrv8jU"></div>
<p id="demo"></p>

This could be one of the many implementations (let's say a very basic one) :-
const mando = new Image(150, 150);
mando.src = 'https://starwarsblog.starwars.com/wp-content/uploads/2019/12/the-mandalorian-announce-tall.jpg';
/* Events fired on the drag target */
document.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("demo").innerHTML = "Started to drag the p element.";
event.target.style.opacity = "0.4";
});
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
document.addEventListener("dragenter", function(event) {
if (event.target.className == "droptarget") {
event.target.style.border = "5px dotted red";
}
});
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
document.addEventListener("dragleave", function(event) {
if (event.target.className == "droptarget") {
event.target.style.border = "";
}
});
document.addEventListener("drop", function(event) {
event.preventDefault();
const dropTarget = event.target.closest('.droptarget');
if (dropTarget) {
document.querySelector("#demo").style.color = "";
event.target.remove();
dropTarget.append(mando);
}
});
.dragtarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
.droptarget {
float: left;
width: auto;
height: auto;
margin: 15px;
padding: 10px;
}
<p>Drag and drop the p element on the image:</p>
<div class="dragtarget">
<p draggable="true" id="dragtarget">Drag me!</p>
</div>
<div class="droptarget"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/49ec1464-d899-400a-b608-c48c76b500d2/ddlby97-f31bd202-49ef-4391-995a-e08a03e9a0f8.jpg/v1/fit/w_150,h_150,q_70,strp/baby_yoda_by_patrickbrown_ddlby97-150.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTAwIiwicGF0aCI6IlwvZlwvNDllYzE0NjQtZDg5OS00MDBhLWI2MDgtYzQ4Yzc2YjUwMGQyXC9kZGxieTk3LWYzMWJkMjAyLTQ5ZWYtNDM5MS05OTVhLWUwOGEwM2U5YTBmOC5qcGciLCJ3aWR0aCI6Ijw9OTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.F2FTXKUhT4EtaU-LcDHGU-e6TKzIADYXo3UIRgrv8jU" width='150' height = '150'>
</div>
<p id="demo"></p>
Your event.target is the img element. So I have used the closest() function to get the nearest parent node with class of droptarget and then simply removed the existing image (again event.target) with a preloaded image.

Fire mouseup event only for outer div

I have an HTML element (form element - textbox) inside another series of divs.
I created listener for mouseup event on the outer div, but it fires when I click on the textbox.
I thought it would only fire when mouseup on the outer div since I attached the listener to that element - not to the textbox
Is there a way to prevent it from firing when 'mouseup' fires on the textbox?
require([
"dijit/form/TextBox",
"dojo/on",
"dojo/dom"
], function (
TextBox,
on,
dom) {
var box = new TextBox({
name: "any",
value: "",
placeholder: "Type anything here"
}, "textBox");
var canvas = dom.byId("outerDiv");
on(canvas, "mouseup", function (e) {
alert();
});
});
dojo.require("dijit.form.anyText");
var textBox = dijit.byId("textBox");
console.log( "--- >> "+textBox.get("value"));
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>
<Div id="outerDiv" style="width: 3in; height: 3in; border: 1px solid;border-color:black; cursor: pointer;">
<Div id="innerDiv" style="height: auto; border: 1px solid;border-color:blue;">
<div id="textBox" readonly></div>
</Div>
</Div>

When you click the text box, the event "bubbles up" to the outer elements.
JavaScript's Event.stopPropagation() "prevents further propagation of the current event in the capturing and bubbling phases".
Below is an example in pure JavaScript, but see also dojo.stopEvent.
var outerDiv = document.getElementById('outerDiv');
var textBox = document.getElementById('textBox');
outerDiv.addEventListener('mouseup', function(event) {
console.log('mouse up on outer div');
});
textBox.addEventListener('mouseup', function(event) {
event.stopPropagation();
console.log('mouse up on text box');
});
#outerDiv {
width: 3in;
height: 3in;
border: 1px solid;
border-color: black;
cursor: pointer;
}
#innerDiv {
height: auto;
border: 1px solid;
border-color: blue;
}
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>
<Div id="outerDiv">
<Div id="innerDiv">
<div id="textBox" readonly>textbox</div>
</Div>
</Div>
Edit
Here's a Dojo example:
require([
"dijit/form/TextBox",
"dojo/on",
"dojo/dom"
], function(
TextBox,
on,
dom) {
var box = new TextBox({
name: "any",
value: "",
placeholder: "Type anything here"
}, "textBox");
var canvas = dom.byId("outerDiv");
on(box, "mouseup", function(e) {
console.log('mouse up on text box');
dojo.stopEvent(e);
});
on(canvas, "mouseup", function(e) {
console.log('mouse up on outer div');
});
});
#outerDiv {
width: 3in;
height: 3in;
border: 1px solid;
border-color: black;
cursor: pointer;
}
#innerDiv {
height: auto;
border: 1px solid;
border-color: blue;
}
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<Div id="outerDiv">
<Div id="innerDiv">
<div id="textBox" readonly>textbox</div>
</Div>
</Div>

You can check the id before creating the alert
on(canvas, "mouseup", function (e) {
if (e.target.id == "outerDiv") {
alert();
}
});
JS Fiddle

remove duplicated tags jquery

i have this piece of code and i would like to look for duplicates
and if found i want to get alert that it already exists so users cant insert that word/tag. can some one please help
<div id="tags">
<span>a</span> <span>b</span>
<input type="text" value="" class="paste" id="search" placeholder="Add a tag" />
</div>
<script>
$("#tags input").on({
focusout : function() {
var txt= this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
if(txt) $("<span/>",{text:txt.toLowerCase(), insertBefore:this});
this.value="";
if (($('#tags span').length) >4) {
$('#tags input').prop('disabled', true);
}
},
keyup : function(ev) {
// if: comma|enter|space (delimit more keyCodes with | pipe)
if(/(188|13|32)/.test(ev.which)) $(this).focusout();
}
});
$('#tags').on('click', 'span', function() {
if(confirm("Remove "+ $(this).text() +"?")) $(this).remove();
$('#tags input').prop('disabled', false);
});
});
</script>
DEMO

You can have a map of added tags, and before adding the tag, check if it exists:
$(function() { // DOM ready
// ::: TAGS BOX
// added tags (mark 'a' and 'b' as already added)
let tags = {
'a': true,
'b': true
};
$("#tags input").on({
focusout: function() {
var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
if (txt) {
if (tags[txt]) { // if the tag already exists show an error
console.log(txt + ' already exists');
} else {
$("<span/>", {
text: txt.toLowerCase(),
insertBefore: this
});
tags[txt] = true; // add the tag
}
}
this.value = "";
if (($('#tags span').length) > 4) {
$('#tags input').prop('disabled', true);
}
},
keyup: function(ev) {
// if: comma|enter|space (delimit more keyCodes with | pipe)
if (/(188|13|32)/.test(ev.which)) $(this).focusout();
}
});
$('#tags').on('click', 'span', function() {
if (confirm("Remove " + $(this).text() + "?")) {
$(this).remove();
var text = $(this).text();
tags[text] = false; // remove the tag
}
$('#tags input').prop('disabled', false);
});
});
#tags {
float: left;
border: 1px solid #ccc;
padding: 5px;
font-family: Arial;
}
#tags>span {
cursor: pointer;
display: block;
float: left;
color: #fff;
background: #789;
padding: 5px;
padding-right: 25px;
margin: 4px;
}
#tags>span:hover {
opacity: 0.7;
}
#tags>span:after {
position: absolute;
content: "×";
border: 1px solid;
padding: 2px 5px;
margin-left: 3px;
font-size: 11px;
}
#tags>input {
background: #eee;
border: 0;
margin: 4px;
padding: 7px;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search-container">
<div id="tags">
<span>a</span> <span>b</span>
<input type="text" value="" class="paste" id="search" placeholder="Add a tag" />
</div>
</div>

drop EventListener doesn't work

When I drag & drop the text, nothing happens. But the same script works when I change the event to "dragenter" or "dragleave". Did I miss anything?
function handleDragDrop(e) {
console.log("Something droped");
dropStatus.innerHTML = "Something droped";
}
var dropZone = document.getElementById("dropZone");
var dropStatus = document.getElementById("dropStatus");
dropZone.addEventListener("drop", handleDragDrop);
.drop-zone {
width: 300px;
padding: 20px;
border: 2px dashed #000;
}
<div id="dropZone" class="drop-zone">Drop Zone!</div>
<div id="dropStatus"></div>
<div class="" draggable="true">DRAG ME</div>

Need to cancel the over
function handleDragDrop(e) {
console.log("Something droped");
dropStatus.innerHTML = "Something droped";
}
var dropZone = document.getElementById("dropZone");
var dropStatus = document.getElementById("dropStatus");
dropZone.addEventListener("drop", handleDragDrop);
dropZone.addEventListener("dragover", function(e) {
e.preventDefault();
return false;
});
.drop-zone {
width: 300px;
padding: 20px;
border: 2px dashed #000;
}
<div id="dropZone" class="drop-zone">Drop Zone!</div>
<div id="dropStatus"></div>
<div class="" draggable="true">DRAG ME</div>

running jquery media query without reload

i have three different divs red, blue, green and yellow. red contains an input box. am trying to hide yellow if the input box in red is clicked(focus) and if the screen size is below 500. it does work but only if i reload the page is there any way to make it work without reloading the page?
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="s" placeholder="Search">
</form>
</div>
<div class="blue"> top </div>
<div class="green"> middle </div>
<div class="yellow"> bottom </div>
js
if ($(window).width() < 960) {
$(function(){
$(".s").on("focus",function()
{
$(".yellow").hide();
});
$(".s").on("blur",function()
{
$(".yellow").show();
});
});
}
else {
}
css
.red, .blue, .green, .yellow
{
padding: 10px;
border: 1px solid #f00;
}
.red{
background: red;
}
.blue{
background: blue;
}
.green{
background: green;
}
.yellow{
background: yellow;
}
.s:focus{
border: 1px solid black;
}
.s:focus + yellow{
display: none;
}

Instead of binding on load of the page, put the code in a function and call that function when you want it to be called. I added it in a function and called on click of a button for the demo.
Demo
$(document).ready(function () {
$('button').on('click', function () {
if (checkWidth()) { //checking width of window before binding the focus event
onFocusHandling();
}
});
});
function onFocusHandling() {
//you can also add the checkWidth() here than above
$(".s").on("focus", function () {
$('.yellow').hide();
});
$(".s").on("blur", function () {
$('.yellow').show();
});
}
function checkWidth() {
return ($(window).width() < 960);
}
Updated
Fiddle
Called the function onFocusHandling on window resize and on document ready
$(document).ready(function () {
onFocusHandling();
$(window).resize(function () {
onFocusHandling();
});
});
function onFocusHandling() {
if (checkWidth()) {
$(".s").on("focus", function () {
$('.yellow').hide();
});
$(".s").on("blur", function () {
$('.yellow').show();
});
}
else {
$(".s").off("focus").off("blur");
}
}
When the width is maximized unbind the focus and blur event.

The functionality you want can be done using a much simple way, here is my HTML
HTML
<div class="red">
<form>
<input type="text" class="s" id="txt" placeholder="Search"/>
</form>
</div>
<div class="blue">top</div>
<div class="green">middle</div>
<div class="yellow">bottom</div>
CSS
.red, .blue, .green, .yellow {
padding: 10px;
border: 1px solid #f00;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
.s:focus {
border: 1px solid black;
}
.s:focus + yellow {
display: none;
}
MY JS:
$(document).ready(function() {
var width = $(window).width();
$(window).resize(function() {
$(".s").trigger("blur");
$(".s").on("focus", function()
{
var width = $(window).width();
if (width < 960)
{
$(".yellow").hide();
}
});
$(".s").on("blur", function()
{
$(".yellow").show();
});
});
});
UPDATED JS:
$(document).ready(function() {
var width = $(window).width();
$(".s").trigger("blur");
$(".s").on("focus", function()
{
var width = $(window).width();
$("#det").text(width);
alert(width);
if (width < 960)
{
$(".yellow").hide();
}
});
$(".s").on("blur", function()
{
$(".yellow").show();
});
$(window).resize(function() {
$(".s").trigger("blur");
$(".s").on("focus", function()
{
var width = $(window).width();
$("#det").text(width);
alert(width);
if (width < 960)
{
$(".yellow").hide();
}
});
$(".s").on("blur", function()
{
$(".yellow").show();
});
});
});
What i am doing here is ,
Used window.resize()function in order to detect the resize of the page
Once window is resized, i trigger a blur function to the textbox, using $(".s").trigger("blur")
Then, I find the width of the window, only when the user focuses on the text
Once input box gets into focus again, I hide the Yellow div.
Here is a DEMO for your reference